フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

長年使っている独自のCSS設計(命名規則)を紹介します

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

[紹介元] CSSタグが付けられた新着記事 – Qiita 長年使っている独自のCSS設計(命名規則)を紹介します

コメント

記事に戻る

コメントを残す