ユーザー操作

scroll-padding

scroll-padding は、スクロールする箱で、吸い付いた要素やリンクで飛んだ先を、箱の端からどれだけ内側に止めるかを指定します。固定したヘッダーの下に隠れないようにするときに使います。

構文

[ auto | <length-percentage [0,∞]> ]{1,4}

123

プリセット

右下の角をドラッグするとサイズを変えられます

.box {
  overflow: auto;
  scroll-snap-type: y mandatory;
  scroll-padding: 24px;
}

.box > :nth-child(2) {
  scroll-snap-align: start;
}

scroll-padding

4 辺を同じ値にする

scroll-padding24px

123

padding と同じく、1〜4 つの値で上・右・下・左を書きます。scroll-padding-top のように辺ごとにも書けます。

プレビューは scroll-snap-type: y mandatory で縦にスクロールする箱で、2 枚目の札の上端を箱の上端に合わせています（scroll-snap-align: start）。scroll-padding を書くと、2 枚目はその分だけ下に止まります。

position: fixed や sticky のヘッダーがあるページで、ページ内リンクで飛んだ見出しがヘッダーの下に隠れないように、html に scroll-padding-top を書きます。