PHPnews.io

How to prevent scrolling the page on iOS Safari 15

Written by Bram.us / Original link on Dec. 16, 2021

safari.jpg

Rik Schennink:

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 the touchmove event 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 →

bram link ios modal safari scrolling bram

« Here’s a PNG that will show a different image in Apple Software - Understanding Rendering in the Jamstack (SSG, ISR, DPR, DSG, …) »