CSS Scroll Snapの使い方 — スライダーとページングUIをCSSだけで実装
CSS Scroll Snapはスクロール位置を特定の要素にスナップさせる機能で、JavaScriptなしでページング・スライダー・カルーセルUIを実装できます。モバイルフレンドリーなスワイプUIの実装にも使われます。
scroll-snap-typeとscroll-snap-alignの基本
scroll-snap-typeをスクロールコンテナ（overflow: scroll）に設定します。x mandatory（水平方向の強制スナップ）・y mandatory（垂直方向）・both mandatoryが使えます。mandatoryは必ずスナップ位置に止まり、proximityは近い場合のみスナップします。各アイテムにscroll-snap-align: start / center / endでスナップ位置を指定します。
水平スライダーの実装
.slider { display: flex; overflow-x: scroll; scroll-snap-type: x mandatory; scroll-behavior: smooth; } .slide { flex: 0 0 100%; scroll-snap-align: start; } でフルページスライダーが実装できます。scroll-behavior: smoothをつけるとスクロールアニメーションがなめらかになります。スクロールバーをhiddenにするとスワイプUIらしくなります。
scroll-padding・scroll-marginの活用
scroll-padding-topはfixedヘッダーがある場合にスナップ位置をずらす用途に使います。例えば固定ヘッダーが60pxの場合、scroll-padding-top: 60pxをhtml要素に設定することで、アンカーリンクのスクロール先がヘッダーに隠れなくなります。scroll-marginはスナップアイテム側に余白を設定できます。
ScrollSnapとJavaScriptの組み合わせ
CSS Scroll Snapは純粋なCSSで動作しますが、現在のスナップ位置の取得には scrollLeft/scrollTopやIntersection Observerを使います。前/次ボタンはscrollToやscrollByで特定のアイテムにスクロールします。CSS Scroll Snap Generatorでコンテナとアイテムの設定を組み合わせてCSSコードを生成し、実際の動作をプレビューできます。