Safari is not preventing the scrolling of

Question

Here's the extremely simple HTML page

<body style="overflow-y: hidden">
  ...
</body>

The expected behavior of this page is: scrolling of a document is prevented because of overflow-y: hidden.

It works as expected (scrolling is prevented) everywhere except Safari.

Live demo: https://spotted-chime.glitch.me/

The question is: how to make Safari behave the same way as other browsers?

Rahul Gandhi · Accepted Answer

Just use overflow: hidden and it will work.

Alternatively, you can try using position: fixed on the <body> tag as well.

(NOTE: Using this approach, the body will scroll to the top as by default the top: 0.)

EDIT: For safari mobile devices, you need to use Javascript events. Explained in this answer.

https://stackoverflow.com/a/4770179/2860486

Safari is not preventing the scrolling of <body style="overflow-y: hidden">