CSS scroll-margin-block-end 属性

定義と用法

scroll-margin-block-end この属性は、ブロック方向上でのアライメント位置とコンテナ間の距離を指定します。

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

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

を定義します。

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

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

CSSの scroll-margin-inline および scroll-margin-block 属性はCSS属性 CSS scroll-margin-top 属性、scroll-margin-bottom、scroll-margin-left および scroll-margin-right 非常に似ていますが、 scroll-margin-block および scroll-margin-inline 属性はブロック方向とインライン方向に依存しています。

例

例1

ブロック方向上で、アライメント位置とコンテナ間のスクロールオフセットマージンを20pxに設定します：

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

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

例2

当<div>要素の writing-mode 属性値がvertical-rlに設定された場合、ブロック方向は右から左になります。結果として、要素の端は下部から左側に移動します：

div {
  scroll-margin-block-end: 50px;
  writing-mode: vertical-rl;
}

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

CSS文法

scroll-margin-block-end: 0|value|initial|inherit;

属性値

技術的詳細

ブラウザのサポート

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

関連ページ

参照：CSS scroll-snap-align 属性

参照：CSS scroll-snap-type 属性

参照：CSS writing-mode 属性