ユーザー操作
scroll-margin
scroll-margin は、スクロールして要素に吸い付いたりリンクで飛んだりするとき、要素の外側にどれだけ余裕を取って止めるかを指定します。要素ごとに止まる位置をずらせます。
構文
<length>{1,4}プレビュー
123
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
overflow: auto;
scroll-snap-type: y mandatory;
}
.box > :nth-child(2) {
scroll-snap-align: start;
scroll-margin: 24px;
}コントロール
scroll-margin
4 辺を同じ値にする
scroll-margin24px
123
解説
値の意味
0：初期値です。要素の枠にぴったり合わせて止めます。24pxなどの長さ：要素の外側にその分の余裕を取ります。負の値では、要素の内側に食い込んだ位置で止めます。
margin と同じく、1〜4 つの値で上・右・下・左を書きます。scroll-margin-top のように辺ごとにも書けます。% は書けません。
プレビューは scroll-snap-type: y mandatory で縦にスクロールする箱で、2 枚目の札に scroll-snap-align: start と一緒に書いています。正の値では 2 枚目が箱の上端からその分だけ下に止まり、負の値では上端が箱の外に隠れます。
よく使う場面
ページ内リンクで飛ぶ見出しに書いて、固定したヘッダーの下に隠れないようにしたり、見出しの上に少し余白を残したりします。
気をつけること
- 見た目の余白（
margin）は変わりません。変わるのは、吸い付くときやリンクで飛んだときに止まる位置だけです。 - 箱の側でまとめてずらすときは、スクロールする箱に
scroll-paddingを書きます。両方を書くと、ずれは足し合わされます。