MENU

[HTML,CSS]overflow属性を使わずに、一部要素の横スクロールを実現する。

エンジニア
CSS HTML

overflow-x:scrollを使わずに、特定要素を横スクロールしたい要件があった。
親要素を横するクロールしつつ、position:stickyをつけたかったのだ。

ただ、position:sticky は親祖先要素まで遡って、overflowプロパティが指定されている場合、stickyされない。。。という仕様があった。

本記事では、overflow-x:scrollを使わずに、特定要素を横スクロールするためのCSSを記載し、stickyに関しては別記事でまとめたいと思う。

目次

overflow-x:scrollを使わずに、特定要素を横スクロールする

動画のようなHTML、CSSを作成します。
赤枠の領域をoverflowプロパティを使わずに横スクロールさせます。

header, footer要素を固定し、main要素の中に配置した子要素をスクロールさせています。

HTML、CSSはこちら。

<!DOCTYPE html>
<style>
    .red {
        background-color: red;
    }

    .black {
        background-color: black;
    }

    .gray {
        background-color: gray;
    }

    .padding {
        padding: 8px;
        box-sizing: border-box;
    }

    .body {
        margin: initial;
    }

    .layout {
        width: max-content;
    }

    .box {
        width: 100vw;
        position: sticky;
        left: 0px;
    }

    .horizontal_scroll {
        width: 1200px;
        height: 200px;
    }
</style>

<body class="body">
    <div class="layout">
        <header class="box padding gray">
            header
        </header>
        <main class="padding black">
            <div class="horizontal_scroll padding red">
                この領域が横スクロール
            </div>
        </main>
        <footer class="box padding gray">
            footer
        </footer>
    </div>
</body>

横スクロールを実現しているのは、.layoutクラス、.boxクラス、.horizontal_scrollクラスです。

.layoutクラスの役割

header、footer、main要素を包含している.layoutクラスは、widthプロパティを指定します。

    .layout {
        width: max-content;
    }

.layoutクラスにwidthプロパティを指定しないと、デフォルト値のautoが指定されます。
そうすると、要素の中で最大のwidthに合わせてブラウザサイズを調整するので、header、footerのデザインがスクロールされずに切れてしまいます。

widthにmax-contentを指定することで、テキストコンテンツにoverflowが発生してもコンテンツが全く折り返されなくなります。

MDN Web Docs
max-content – CSS: カスケーディングスタイルシート | MDN max-content は大きさのキーワードで、コンテンツの内在的な最大幅や高さを表します。テキストコンテンツの場合、これはオーバーフローが発生しても、コンテンツがまったく…

HTMLのテキストコンテンツ要素は、divタグなどが該当します。

MDN Web Docs
HTML 要素リファレンス – HTML: ハイパーテキストマークアップ言語 | MDN このページでは、すべての HTML 要素を一覧表示しています。これらはタグを使用して作成されます。

.boxクラスの役割

.boxクラスはテキストコンテンツではない、header、footerに適用します。
この要素たちにはブラウザ幅で表示され、レスポンシブのようにリサイズされるようにします。

    .box {
        width: 100vw;
        position: sticky;
        left: 0px;
    }

まずは、widthはブラウザ固定で100vwを指定して、リサイズしてもブラウザサイズ幅に合うようにしています。

肝はstickyです。
stickyは相対位置指定と絶対値指定を組み合わせたもので、粘着位置指定と呼ばれています。
absoluteと同様に、top,bottom,left,rightプロパティと合わせて使用します。

例えば、.stickyクラスがあった時に、ビューポートをスクロールして要素の位置が上端から10pxより小さくなるまでは、相対位置指定の要素として振る舞います。それ以降は閾値を超えてからビューポートのスクロールを戻すまで、上端から10pxで固定位置指定になります。

.sticky {
  position: sticky;
  top: 10px;
}

つまり、今回はleft:0pxを指定することで、他の要素に横スクロールが発生しても、常に左端に固定されます。
さらにwidth:100vwを指定することで、常に固定されているように表示されます。

.horizontal_scrollクラスの役割

ここには、横スクロールしたい要素を配置するだけです。
今回はブラウザサイズをはみ出す幅に指定しています。

    .horizontal_scroll {
        width: 1200px;
        height: 200px;
    }

Summary

max-contentやwidth、positionの性質を理解して使うことで、overflowを使用しなくても横スクロールが実現できます。

エンジニア
CSS HTML
よかったらシェアしてね！

関連記事

目次