CSS: How to prevent scrolling on iOS Safari?

Question

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?

Presented answer was no longer working on iOS 11, 12 – RRTW Apr 15 '19 at 02:23 — RRTW, Apr 15 '19 at 02:23

score 39 · Answer 1 · answered Oct 16 '15 at 10:25

39

Combine it with position: fixed to do this on iOS…

overflow: hidden;
position: fixed;

answered Oct 16 '15 at 10:25

matharden

757
6
15

16

Sorry to resurrect an old thread, but this answer works only if the modal is being triggered while the page is scrolled all the way to the top. If the page is scrolled down at all then setting "position: fixed" will scroll you back to the top before triggering the modal instead of leaving you where you were when you triggered the modal. Is there a solution that addresses this as well? – Barak Gall Aug 29 '16 at 20:57
1

@0sin Set the body's `height` to its `scrollHeight`, then make the children `fixed` and use `transform: 'translateY(-' + body.scrollTop + 'px)'` on them – aleclarson Jun 01 '17 at 02:37
1

@aleclarson not hacky at all, gotta love iOS – br4nnigan Jun 27 '18 at 12:17
1

Thanks - that sorted it for me! When will the trillion dollar company finally pull their finger out and sort out all these crappy IOS bugs? I'm fed up having to do hacks around issues that shouldn't even be issues *hmmmf* – Andrew Newby Dec 03 '18 at 15:02
Just to say that the "position: fixed" would cause black box on the bottom of the website on iPhoneX, and probably any build later than that. – Terry Windwalker Dec 28 '21 at 17:11

score 31 · Answer 2 · answered Sep 15 '16 at 07:37

31

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;
}

answered Sep 15 '16 at 07:37

AsLittleDesign

345
3
4

If you are using this for modals, chances are you are using javascript anyway... so this works great. This is the best solution I have found, as setting position: fixed resets the scroll position on the page. If you just pair this with overflow: hidden, it works for both desktop and mobile and does not effect scroll position – TinMonkey Apr 07 '17 at 23:32
This plus `overflow: hidden` is the only thing I've been able to get to work – Charlie Martin Jun 30 '17 at 10:37
3

Tested on Iphone 7. This is not working. – Playdome.io Nov 28 '17 at 06:04
4

one issue with this solution, is when you are using this with scrollable modals, it disable the scroll inside the modal – Or Bachar Mar 27 '18 at 10:57
Exactly what I needed, thanks! – T.W.R. Cole Oct 15 '18 at 18:04
Tested on iPhoneX, not working. Neither do `window.ontouchmove`. – Terry Windwalker Dec 28 '21 at 17:44

CSS: How to prevent scrolling on iOS Safari?

2 Answers2