How to prevent scrolling the page on iOS Safari 15

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.

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 →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.