Menu
I created a modal. When the modal is open I'm stopping the scroll on Desktop with overflow:hidden; to the <body>. It's working.
But it's not working on my iPhone 6s Mobile Safari.
How can I prevent scrolling when the modal is open in mobile safari?
650
The most straightforward way for disabling scrolling on websites is to add overflow: hidden on the <body> tag. Depending on the situation, this might do the job well enough. If you don't have to support older versions of iOS, you can stop reading here. // src/utils/scroll-lock.
Try double tapping on either side of the screen at edges. Use a two finger press inside the window that you're trying to scroll and move them up or down simultaneously. Or pinch your thumb and forefinger together and move it up or down.
Disabling scroll with only CSS. There's another way to disable scrolling that is commonly used when opening modals or scrollable floating elements. And it is simply by adding the CSS property overflow: hidden; on the element you want to prevent the scroll.
Combine it with position: fixed to do this on iOS…
overflow: hidden; position: fixed; There isn't (to my knowledge) a great way to accomplish this with CSS without repercussions on the UX.
While it's Javascript, and not CSS, the best way I've found to do this is the following:
// Disable scrolling. document.ontouchmove = function (e) { e.preventDefault(); } // Enable scrolling. document.ontouchmove = function (e) { return true; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
