windowのスクロールを動かせなくする #JavaScript

モーダルとかドロワーメニューとか表示するとき、windowのスクロールを動かせなくしたくなりますよね。動いてもクリティカルに困るわけでもないですが。

ほとんどのブラウザはhtml要素にoverflow: hiddenすれば実現できます。

<html style="overflow: hidden;">
    <body>
        コンテンツ
    </body>
</html>

超絶シンプルでいいですね。
でも、iOS Safari以外はです。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>

iOS Safariもいけるデモ