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以降