CSS scroll-padding-block-start 属性

定義と用法

scroll-padding-block-start 属性は、ブロック方向上で、コンテナの始まり位置から子要素の吸引位置までの距離を指定します。

これは、あなたがスクロールを停止したとき、スクロールが迅速に調整し、ブロック方向上で、吸引位置とコンテナ間に指定された距離で停止するという意味です。

ブロック方向とは、現在の行に対する位置関係で、次の行が配置される方向を指します。これはCSS display: block; を持つタグ（例：<p>や<div>タグ）がページ上でレイアウトされる方法です。ブロック方向は書き込み言語によって異なり、例えばモンゴル語の新しい行は左から右に並ぶため、ブロック方向は左から右、英語のページのブロック方向は下方向です。ブロック方向はCSS属性 writing-mode で定義されます。

アタッチメント位置は、スクロールを停止したときに子要素がコンテナ内にアタッチメントされる位置を指します。

注意：この属性はブロック方向の scroll-snap-align 属性が'start'に設定されている場合にのみ効果があります。

を設定することで、 scroll-padding-block-start 属性の効果を設定する必要があります。子要素に scroll-snap-align 属性、および親要素に scroll-padding-block-start および scroll-snap-type 属性。

インスタンス

例1

コンテナのスタート位置からアタッチメント位置までのブロック方向のスクロール内側マージンを20pxに設定します：

div {
  scroll-padding-block-start: 20px;
}

実際に試してみてください

例2：画像ライブラリ

アタッチメント行動を持つ画像ギャラリーで、 scroll-padding-block-start 属性は画像を固定要素の下に押し出します：

#container {
  scroll-padding-block-start: 30px;
}

実際に試してみてください

例3

コンテナ要素の writing-mode 属性値がvertical-rlに設定されている場合、ブロック方向のコンテナのスタート位置と子要素が上から右側に移動します。これにより、スクロールアタッチメントの行動および scroll-padding-block-start 属性の動作方法：

#container {
  scroll-padding-block-start: 20px;
  writing-mode: vertical-rl;
}

実際に試してみてください

CSS文法

scroll-padding-block-start: auto|value|initial|inherit;

属性値

技術的詳細

ブラウザのサポート

テーブルの数字は、この属性を完全にサポートする最初のブラウザのバージョンを示しています。

関連ページ

参照：CSS scroll-snap-align 属性

参照：CSS scroll-snap-type 属性

参照：CSS writing-mode 属性