Edited at
CSSDay 6

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

モーダルとかドロワーメニューとか表示するとき、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もいけるデモ