スクロールスナップ
Scroll snapping
別名: スクロールスナップ、スナップスクロール、Scroll snap、CSS Scroll Snap
生態（さわってみる）
一言定義
スクロールの手を離すと、あらかじめ定めた区切り位置へ自動的に吸着して止まるスクロール挙動のUI。
分類
使う場面
- 画像ギャラリーやフルスクリーンセクションを、区切りよく1枚・1画面ずつ見せたいとき
- JSを書かずCSSだけでスナップ挙動を実現し、実装コストを抑えたいとき
避ける場面
- 自由な位置で止まれる、連続的なスクロール体感をそのまま保ちたいとき
- 現在何枚目・何番目かをドットなど専用コントロールで明示したいとき（→カルーセル）
近縁種との比較
スクロールスナップはCSS Scroll Snap仕様（scroll-snap-type/scroll-snap-align）だけで実現できる、JSを必要としないスナップ挙動である。カルーセルとは、複数の項目を順に切り替えて見せる点で似ているが、カルーセルがドットやアクティブスライドの管理、自動再生、前後ボタンといったJS制御の専用ウィジェットであるのに対し、スクロールスナップはブラウザネイティブのスクロールに区切りの制約を加えるだけで、現在位置の可視化や自動再生などの機能は持たない。パララックスとは、どちらもセクション単位の縦スクロール表現に関わる点で近縁だが、パララックスが前景・背景の速度差という視覚効果を作るのに対し、スクロールスナップはスクロールの停止位置そのものを制御する挙動であり、両者は組み合わせて使うこともできる別レイヤーの技術である。
実例リンク
アクセシビリティ
- role
- 特別なroleは不要。スクロールコンテナはoverflow-x/yを持つ通常の要素のまま
- キーボード操作
- 矢印キー・PageUp/PageDown・Tabによる要素間移動など、ブラウザネイティブのスクロール操作がそのまま機能する（CSSのみの実装であるため）
- 補足
- prefers-reduced-motionが有効な環境ではscroll-behavior: smoothによる滑らかな移動を無効化する。scroll-snap-type自体は動きではなく停止位置の制約なので、無効化の対象に含めなくてよい