ユーザー操作
scroll-snap-type
scroll-snap-type は、スクロールする箱を、止まったときに中の要素の位置へ吸い付かせるかを指定します。吸い付かせる向きと強さを書きます。
構文
none | [ x | y | block | inline | both ] [ mandatory | proximity ]?プレビュー
123
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
overflow: auto;
scroll-snap-type: y mandatory;
}
.box > :nth-child(2) {
scroll-snap-align: center;
}コントロール
scroll-snap-typey mandatory
吸い付く強さ
123
解説
値の意味
none：初期値です。吸い付きません。x/y：横／縦のスクロールで吸い付きます。block/inlineは文字の流れに沿った向きで、横書きなら縦／横です。bothは両方の向きです。mandatory：スクロールが止まるときは、必ずどこかの吸い付く先に合った位置で止まります。proximity：吸い付く先の近くで止めたときだけ合わせます。どのくらい近ければよいかはブラウザが決めます。強さを省いたときはこれになります。
吸い付く先は、中の要素に scroll-snap-align を書いて決めます。プレビューでは縦に積んだ 3 枚の札のうち、2 枚目にだけ scroll-snap-align: center を書いています。y mandatory では箱をスクロールしても 2 枚目が真ん中に戻り、y proximity では 2 枚目の近くまでスクロールしたときだけ吸い付きます。
よく使う場面
横に並べた写真のカルーセルや、1 画面ずつ切り替わる縦のセクションなど、きりのよい位置で止めたいスクロールに使います。
気をつけること
- スクロールする箱（
overflowがauto・scroll・hidden）に書きます。ページ全体のスクロールなら、bodyではなくhtmlに書きます。 - 中に
scroll-snap-alignを書いた要素が無いと、何も起きません。 mandatoryでは、吸い付く先と吸い付く先の間に箱より長い中身があると、途中で止められず読めない部分が出ます（プレビューは吸い付く先が 1 つだけなので、1 枚目と 3 枚目の端までスクロールできません）。中身の長さが決まっていないときはproximityにします。