React-modal: Block scrolling events behind the modal

[nateajohnson]

Is there some way to block scrolling events behind the modal while the modal is active? I have a long list of items and each one opens a modal. If you scroll while the modal is active, even if there isn't data to scroll in the modal, it scrolls the list behind the modal. This can be replicated by just adding a bunch of paragraph tags to the example project so that you page is large. What's worse is when there is data in the modal that also scrolls. The scrolling will scroll behind the modal all the way to the top or bottom and then start scrolling the data inside the modal.

Anyone know how to fix this behavior?

Thanks!

[zdfs]

The modal adds a class to the body element: ReactModal__Body--open. You can simply add overflow-y: hidden; to that class and I think it should solve your problem.

[martco]

@zdfs , thanks that worked for me

[mzabriskie]

@nateajohnson see solution provided by @zdfs above.

[julenr]

Hi, This solution doesn't work when you use classes by some reason.
Thanks,

[jackyzhai]

I suggest a configuration be added to control this, in order to hide implementation details. I did spend some time figuring out a solution for this.

[LPayyapilli]

@zdfs what if we need to keep the scroll working and only have the body not scroll up when the modal opens? I am dynamically adding a class to the body that sets overflow-y to hidden at the same time as the 'ReactModal__Body--open' class gets added and it is still scrolling up.