CSS scroll-margin-block-start 属性

定義と使用法

scroll-margin-block-start この属性は、ブロック方向上の吸着位置とコンテナ間の距離を指定します。

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

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

定義。

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

この属性が'start'に設定されている場合のみ効果があります。 scroll-margin-block-start 属性の効果を設定する必要がありますが、 scroll-margin-block-start および 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-start: 20px;
}

自分で試してみてください

例2

<div>要素の writing-mode 属性値がvertical-rlに設定されている場合、ブロック方向は右から左です。結果として、要素の先頭部分は上から右に移動します：

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

自分で試してみてください

CSS 文法

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

属性値

技術的詳細

ブラウザのサポート

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

関連ページ

参照：CSS scroll-snap-align 属性

参照：CSS scroll-snap-type 属性

参照：CSS writing-mode 属性