ユーザー操作
scroll-snap-align
scroll-snap-align は、吸い付くスクロールの箱の中で、要素のどこを箱のどこに合わせて止めるかを指定します。start なら要素の先頭を箱の先頭に合わせます。
構文
[ none | start | end | center ]{1,2}プレビュー
123
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
overflow: auto;
scroll-snap-type: y mandatory;
}
.box > :nth-child(2) {
scroll-snap-align: start;
}コントロール
scroll-snap-alignstart
ブロック方向（横書きでは縦）
インライン方向（横書きでは横）を別に決める
123
解説
値の意味
none：初期値です。この要素には吸い付きません。start：要素の先頭（横書きの縦なら上）を、箱の先頭に合わせます。end：要素の末尾（横書きの縦なら下）を、箱の末尾に合わせます。center：要素の真ん中を、箱の真ん中に合わせます。
値を 2 つ書くと、1 つ目がブロック方向（横書きでは縦）、2 つ目がインライン方向（横書きでは横）になります。1 つだけなら両方に同じ値を使います。
プレビューは scroll-snap-type: y mandatory で縦にスクロールする箱で、3 枚の札のうち 2 枚目に書いています。start では 2 枚目が箱の上に、end では下にそろい、none では吸い付かずに 1 枚目から見えます。
よく使う場面
カルーセルの 1 枚ずつのカードや、1 画面ずつのセクションに書いて、スクロールが止まったときにきれいにそろうようにします。
気をつけること
- スクロールする親の箱に
scroll-snap-typeを書かないと効きません。吸い付く向きも、そちらで決めます。 - 箱の端にぴったり合わせたくないときは、箱に
scroll-padding、要素にscroll-marginを書いて、合わせる位置をずらします。 - 要素が箱より大きいときは、
mandatoryでも、要素が箱を覆っている間はその中で自由にスクロールできます。