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 →