CSS scroll-padding-block-end 属性

定義と用法

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

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

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

を定義します。

アテンション位置は、スクロールを停止したときに子要素がコンテナにアテンションして位置を固定する位置を指します。注意： scroll-snap-align この属性はブロック方向の

属性が'end'に設定されている場合にのみ効果があります。 scroll-padding-block-end 属性の効果を確認するには、子要素に scroll-snap-align 属性、および親要素にscroll-snap-align属性を設定し、子要素に scroll-padding-block-end と scroll-snap-type 属性。

インスタンス

例1

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

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

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

例2：画像ライブラリ

アテンションのある画像ギャラリーで、 scroll-padding-block-end 属性は画像を固定要素の上に押し出します：

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

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

例3

コンテナ要素の writing-mode 属性値がvertical-rlに設定されている場合、ブロック方向のコンテナの末端と子要素は底部から左側に移動します。これにより、スクロールアテンションの行動が影響を受けます。 scroll-padding-block-end 属性の動作方法：

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

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

CSSの構文

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

属性値

技術的な詳細

ブラウザのサポート

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

関連ページ

参照：CSS scroll-snap-align 属性

参照：CSS scroll-snap-type 属性

参照：CSS writing-mode 属性