This content originally appeared on Bram.us and was authored by Bramus!
If we show a modal on iOS we need to prevent events inside the modal from interacting with the page behind the modal. On a previous episode of “Fun with Safari” we could use
preventDefault()on thetouchmoveevent but on iOS 15 that no longer works. Here we go.
The solution lies in preventing pointermove while the modal is shown.
Using Rik’s code, here’s a demo on CodePen:
See the Pen
How to prevent scrolling the page on iOS Safari 15 by Bramus (@bramus)
on CodePen.
Rik does set overflow to hidden on the html element there. Most likely this will interfere with classic scrollbars. This can be countered with some scrollbar-gutter: stable;
In the near future we should be able to drop Rik’s code, and simply use the overscroll-behavior CSS property (which I’ve covered here before back in 2017) for this. And by “near future” I really do mean soon: there’s been some active movement in the relevant WebKit bug since early December. Perhaps Safari 16 will include it? 🤞
How to prevent scrolling the page on iOS Safari 15 →
This content originally appeared on Bram.us and was authored by Bramus!
Bramus! | Sciencx (2021-12-16T23:46:05+00:00) How to prevent scrolling the page on iOS Safari 15. Retrieved from https://www.scien.cx/2021/12/16/how-to-prevent-scrolling-the-page-on-ios-safari-15/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.