Search code examples
javascripthtmlcssreactjsposition

React - how to stop screen scrolling in background when modal is open? - Setting position: fixed is causing the screen to jump back to top of page

I'm building a site using React were the user can scroll down the homepage through other users posts.

Each post has a '...' menu which when selected opens up a modal with the menu options.

To prevent the background scrolling when the modal is open I'm using conditional rendering - once the modal is open the background position is set to fixed and overflow is set to hidden.

This works to stop the scrolling however it automatically jumps back to the very top of the page and away from the post the user is looking at.

How can I get around this?

Thanks

Solution

  • You don't need position: fixed;, only overflow: hidden; on document's body should be enough.