How to prevent page scrolling when scrolling a div element?
An alternative and IMO better approach would be to only selectively disable the browser’s scrolling in order to prevent the page scroll, but not the DIV scroll. Check out Rudie’s answer below which demonstrates this solution.
How can I make CSS not scroll back to top of screen?
If we know the top of the scroll location and add it to our CSS, then the body will not scroll back to the top of the screen, so problem solved. We can use JavaScript for this by calculating the scroll top, and add that value to the body styles:
Why does page not scroll when modal is open?
This works, but there’s still a little leakage here after the modal is closed. Specifically, it appears that the page already loses its scroll position when the modal is open and the body set to be fixed. So we have to retrieve the location. Let’s modify our JavaScript to account for that. That does it!
How to make a Div vertical scrollable in Adobe Photoshop?
Set the “hidden” value. Use the overflow-y property to specify whether the content must be hidden, visible or scrolling vertically when the content overflows the element’s top and bottom edges. Set the “auto” value. Use the text-align property with its “center” value.
How to prevent body scrolling but allow overlay scrolling?
Generally speaking, if you want a parent (the body in this case) to prevent it from scrolling when a child (the overlay in this case) scrolls, then make the child a sibling of the parent to prevent the scroll event from bubbling up to the parent. In case of the parent being the body, this requires an additional wrapping element:
Why does scrolling not work when the user scrolls?
In that case I suspect scrolling the element will indeed not work when this code is used. Not because it is inside body but for the reason that all touchmove behaviour has been disabled. Then again, if it has overflow then swiping it will not bubble up and cause momentum page scrolling but ‘normal and local’ scrolling on the element.