モーダルとかドロワーメニューとか表示するとき、windowのスクロールを動かせなくしたくなりますよね。動いてもクリティカルに困るわけでもないですが。
ほとんどのブラウザはhtml要素にoverflow: hiddenすれば実現できます。
<html style="overflow: hidden;">
<body>
コンテンツ
</body>
</html>
超絶シンプルでいいですね。
でも、iOS Safari以外はです。iOS Safari以外は。
iOS Safariで実現する方法はいろいろあるようですが、以下のようにすると実現できます。
<html style="overflow: hidden; height: 100%">
<body style="overflow: hidden; height: 100%">
コンテンツ
</body>
</html>
しかし、上記だけだと、スクロールは動かせなくできますが、動かせなくしたときのスクロールの位置は保持できないので、以下のように、コンテンツ全体を囲む要素をかましてあげて、動かせなくしたときのスクロールの位置の分をmargin-topとかで調整してあげます。複雑で嫌ですね。副作用もありそうだし。
<html style="overflow: hidden; height: 100%">
<body style="overflow: hidden; height: 100%">
<div style="margin-top: -{動かさなくしたときのスクロール量}px">
コンテンツ
</div>
</body>
</html>