react-modal: Opening modal causes body scroll top or bottom

I have an issue that wehever I open the modal the body is immediatelly scrolled to top or to bottom of the website. When the modal is closed the user is not in the place he/she opened the modal but either on the top or on the bottom of website.

I used following CSS to prevent parent element from scrolling (it allways causes the body scrolling top when modal is opened):

.ReactModal__Body--open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

When I try to use just overflow:hidden as recommended in readme.md it does not work for me - the parent element is still scrollable. When I try to use it without position: fixed as below:

.ReactModal__Body--open {
    overflow: hidden;
    width: 100%;
}

It always causes the body scroll bottom when modal is opened.

Skipping width: 100% causes the body content is shifted to the left if position: fixed is used as well.

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 12
Comments: 23

Most upvoted comments

Wild guess: Could it be that you have something like:

<a href="#" onClick={() => this.openModal()}>Open modal</a>

and forgot event.preventDefault()? (You could also use a <button>.)

<a href="#" onClick={event => {event.preventDefault(); this.openModal()}}>Open modal</a>

Edit: I think this is a duplicate of https://github.com/reactjs/react-modal/issues/117#issuecomment-333409035

lydell on Jan 3, 2018

If you use an element that isn’t focusable, adding a tabIndex attribute to the element solved the issue for me. When the modal is closed, the page will go back to the element as it will still be focused.

i.e <img onClick={() => this.openModal() tabindex=‘0’/>

Teranjit on Sep 20, 2018

@webmastervishal I was able to stop the scrolling to top/bottom on open behavior by adding position: fixed to .ReactModalPortal

CSS:

.ReactModal__Body--open {
  position: static;
  overflow-y: scroll;
}

.ReactModal__Html--open {
  overflow-y: hidden;
}

.ReactModalPortal {
  position: fixed;
  z-index: 1 !important;
}

Also remember to pass htmlOpenClassName='ReactModal__Html--open' prop to the Modal.

Kelby2 on Jul 19, 2018

Just adding an outsider perspective. I’ve dealt with the OP’s problem (background jumps to top when opening modal) with vanilla JS modals and the culprit is often the <a href="#"> and how a browser deals with “#”.

Consider making your clickable element not <a>, perhaps a button or just a plain div with a listener. In any case, semantically, should an <a> be used for anything other than an actual link?

kalnode on Aug 4, 2019

Fixed it! Delving into the code…

body.modal-open {position:static !important; overflow:visible; padding:0 !important;}

TheCraftConsulting on Aug 9, 2019

The right answer is by @TheMangoTrain, the “#” value to the <a> element with href attribute is what causes the page to jig, so changing the element to a <button> will resolve the issue! Thanks @TheMangoTrain

jaybabak on Sep 17, 2019

@Kelby2 I tried your solution but my problem isn’t resolved, My problem is that whenever I redirect to a new page and if modal is opened then it scrolls down automatically to the bottom of the page. check this video.

I don’t have a problem if I am able to scroll the background page up and down when modal is open, but whenever I redirect to the new page and modal opens then it must be on the top of the page, instead of scrolling to the bottom of the page.

webmastervishal on Jul 25, 2018

+1, I’m still having this issue with v3.5.1. Upon opening the window, the background scrolls all the way to the bottom. Really breaks the UX flow when you close the modal and find yourself at the bottom of the page. I’ve added the

htmlOpenClassName='ReactModal__Html--open

prop and have set the overflow: hidden’s, but this is still occurring.

Kelby2 on Jul 16, 2018

@diasbruno thank you, this solution solved my problem.

prztrz on Jan 3, 2018

I have a transition while modal is opening, and during this transition I can still see how the body scrolls to top.

(After three years this is still opened, jeez)

kolnogorov on Oct 29, 2020