コハム

Webクリエイターのコハムが提供する、Web制作に役立つ情報をまとめたブログです。

CSSだけでピタッと移動!スクロールスナップの基礎知識

Snappy Scroll with CSS Scroll Snap

記事は上記記事を意訳したものです。

※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。


CSS スクロールスナップは、スクロール可能な要素のスナップポイントを定義できるようにする新しい機能です。これにより、ユーザーのスクロール体験をより細かく制御できます。今回はその仕組みを見ていきましょう。

新しいプロパティ

CSS スクロールスナップモジュールでは、以下の2つの主要な新しいプロパティが導入されました:

  • scroll-snap-type: コンテナ要素に適用され、スナッピングの動作を定義します。x、y、または両方を指定できます。また、mandatory や proximity を第二引数として指定できます。mandatory は最も近いスナップポイントにスクロールを強制し、proximity は指定範囲内の任意の位置でスクロールが止まります。
  • scroll-snap-align: スクロール可能な子要素に適用され、スナップポイントを定義します。start、center、end のいずれかを指定できます。また、none を指定するとスナッピングを無効化できます。

横スクロールのカルーセルの作成

まず、横スクロールのカルーセルを作ってみましょう。各画像がスムーズにスライドし、すぐにスナップするようにしたいと思います。

HTML:

<div class="carousel">
    <div class="slide">
        <img src="/image-1.jpg" width="600" height="400" />
    </div>
    <div class="slide">
        <img src="/image-2.jpg" width="600" height="400" />
    </div>
    <div class="slide">
        <img src="/image-3.jpg" width="600" height="400" />
    </div>
    <div class="slide">
        <img src="/image-4.jpg" width="600" height="400" />
    </div>
</div>

CSS:

.carousel {
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
}

.image {
    flex: 0 0 100%;
    scroll-snap-align: center;
    
    /* スタイリング関連 */
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    background-color: #dddddd;
}

ここでは、.carousel コンテナに scroll-snap-type: x mandatory を適用し、横方向のスナッピングを強制的に行うようにしています。また、.image 要素に scroll-snap-align: center を設定し、各画像がコンテナの中央にスナップするようにしています。

縦スクロールにする場合は、scroll-snap-type の値を y に変更し、Flexレイアウトの方向を垂直にすれば良いでしょう。

.carousel {
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    height: 100vh;
    scroll-snap-type: y mandatory;
}

ブラウザサポート

CSS スクロールスナップは、最近のブラウザでサポートされるようになってきています。主要なブラウザの対応状況は以下の通りです:

ブラウザ デスクトップ版 モバイル版
Google Chrome 69以降 127以降
Mozilla Firefox 68以降 68以降
Safari 11以降 11以降
Microsoft Edge 79以降 79以降
Opera 64以降 80以降
Internet Explorer サポートなし サポートなし
Samsung Internet - 10.1以降

まとめ CSS スクロールスナップは、スムーズでコントロール可能なスクロール体験を実現するための強力なツールです。カルーセル、スライドショー、その他のスクロール可能なレイアウトを構築する際に便利に活用できます。

今回は基本的な使い方を見てきましたが、CSS スクロールスナップにはさまざまな応用例があります。創造的な使い方を探ってみてください。

©コハム