スクロールスナップ
Scroll snappingスクロールの手を離すと、あらかじめ定めた区切り位置へ自動的に吸着して止まるスクロール挙動のUI。
○ 使う場面
- 画像ギャラリーやフルスクリーンセクションを、区切りよく1枚・1画面ずつ見せたいとき
- JSを書かずCSSだけでスナップ挙動を実現し、実装コストを抑えたいとき
× 避ける場面
- 自由な位置で止まれる、連続的なスクロール体感をそのまま保ちたいとき
- 現在何枚目・何番目かをドットなど専用コントロールで明示したいとき（→カルーセル）
別名
スクロールスナップ、スナップスクロール
近縁種との比較
スクロールスナップはCSS Scroll Snap仕様（scroll-snap-type/scroll-snap-align）だけで実現できる、JSを必要としないスナップ挙動である。「スナップ」はもともと、留め具やボタンがカチッとはまり込む感触を表すことばで、スクロールスナップも手を離した瞬間に区切り位置へカチッと収まる感覚を、その語感になぞらえた名称と言える。
| 近縁種 | 違い・使い分け |
|---|---|
| カルーセル | カルーセルとは複数の項目を順に切り替えて見せる点で似ているが、カルーセルがドットやアクティブスライドの管理・自動再生・前後ボタンといったJS制御の専用ウィジェットであるのに対し、スクロールスナップはブラウザネイティブのスクロールに区切りの制約を加えるだけで現在位置の可視化や自動再生などの機能は持たない。 |
分類
機能・役割
- ナビゲーション
- 入力・操作
- 表示・整理
- フィードバック・状態
表示レイヤー
- インライン
- 固定・追従
- オーバーレイ
- 全画面・遷移
複雑さ
- 単体パーツ
- 複合パーツ
- セクション