Scroll snapとは？
-
スクロール操作が完了したとき、特定の位置に吸い寄せられるように移動する機能
- 通常だと、段落や画像の途中で止まることがある
関連語句を簡単に言うと...
- スクロールスナップコンテナー（親）：スクロールできる範囲、箱
- スナップターゲット（子）：ピタッと止まってほしい要素
- スナップポート：今、画面に見えている範囲
- スナップ領域：要素を1つの塊として扱う範囲、境界
関連するCSSプロパティを順番に見ていきます。
scroll-snap-typeとは？
scroll-snap-type は CSS のプロパティで、スクロールコンテナーに設定され、スナップポート内のスナップポイントの強制の方向と厳格さを設定することで、スクロールスナップを有効にします。
MDNには上記のように説明されています。
つまり、今、画面に見えている範囲の中で、ピタッと止まる点に どの軸（方向）でスナップさせるかと、どれくらい厳密に止まるかを設定するプロパティです。
親要素に指定します。
この2つをどう指定するかみていきます。
どの軸（方向）でスナップさせるか
指定の種類としては、5つあります。
-
x：横スクロールに反応 -
y：縦スクロールに反応 -
inline：文字方向のスクロールに反応 -
block：行が積み重なる方向のスクロールに反応 -
both：縦横どちらのスクロールでも反応
inline,blockは文字の進む方向が変わっても、よしなに対応してくれます。
アラビア語などのテキストの方向が右から左の言語にも対応できます。
| 軸の種類 | 横書き | 縦書き |
|---|---|---|
| inline(文字の方向) | 横スクロールに反応 | 縦スクロールに反応 |
| block（行の積み重ね） | 縦スクロールに反応 | 横スクロールに反応 |
どれくらい厳密に止まるか
指定の種類としては、mandatoryとproximityの二つがあります。
-
mandatory：スクロール中でない場合、必ずスナップポイントにスナップする -
proximity：スクロール中でない場合、スナップ位置に近ければスナップする
See the Pen scroll-snap-1 by 加藤璃子 (@kbsovgkd-the-solid) on CodePen.
See the Pen scroll-snap-2 by 加藤璃子 (@kbsovgkd-the-solid) on CodePen.
上記のCodepenを比較してもらうと、わかりやすいと思います。
proximityもスナップしますが、中途半端な位置でスクロールを止めるとそのままです
mandatoryとproximity、どちらを指定するべきか
- 中途半端な位置で止まると困る場合は
mandatory- 画像カルーセルや1画面に1情報を表示したい時
基本的には強力すぎない proximityを使うと、ユーザーに親切
scroll-snap-alignとは？
ボックスのスナップ位置を、そのスナップコンテナーのスナップポート（つまり配置コンテナー）の中におけるスナップ領域（つまり 配置対象物）の配置として指定します。
つまり、スクロールを止めたときに、要素のどこを画面の端にピタッと合わせるかを決めるプロパティです。
子要素に指定します。
指定は主に三つです
-
start：要素の先頭（上端や左端）に合わせる -
end：要素の末尾（下端や右端）に合わせる -
center：要素の真ん中に合わせる
↓の例ではstartを指定しています。
中途半端な位置で止まってみるとわかりやすいかもです。
See the Pen scroll-snap-4 by 加藤璃子 (@kbsovgkd-the-solid) on CodePen.
おまけ - scroll-snap-type を活用したアニメーション
「おみくじを引く」ボタンを押すと、結果がランダムで表示されます。
このアニメーションには、scroll-snap-typeを使っています。
See the Pen omikuji by 加藤璃子 (@kbsovgkd-the-solid) on CodePen.
scroll-snap-typeを使う利点
- JSで止まる位置を厳密に計算しなくて良い
- コード量が少なくなっている
- 表示サイズが変わっても問題ない
Scroll snap 関連のプロパティのブラウザ対応状況
主要なブラウザ（Chrome, Safari, Edge, Firefox, iOS, Android）では問題なく動作するようです
さいごに
今回はScroll Snapの概要とプロパティについて学びました。
ユーザーが意図しないような動きを発生させてしまう可能性があるので、使用時には指定に注意が必要そうです
アドカレ2025が開催中！ 
今年もアドカレ開催中です 
最終日まであとちょっと...！！！
特設サイト ↓
ギフトカードや Airpods, iPadなど、豪華賞品すぎるプレゼントカレンダーは必見！ ↓
参考