CSS scroll-margin-inline-start 属性

定義と用法

scroll-margin-inline-start 属性は、行内方向上で、吸着位置とコンテナの間の距離を指定します。

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

行内方向とは、次の文字が現在の文字に対して行の中でどの位置に配置される方向を指します。これは CSS display: inline; を持つタグ（例：<a> タグや <strong> タグ）がテキスト内でのレイアウト方法です。行内方向は書き込み言語によって異なり、例えばアラビア語の新しい文字は右から左に並ぶため、行内方向は右から左に向かいます。英語のページの行内方向は左から右に向かいます。行内方向は CSS 属性 direction および writing-mode 定義。

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

注意：この属性は、 scroll-snap-align 属性がインライン方向に'start'と設定された場合にのみ作用します。

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

インライン方向上、吸引位置からスクロール可能なコンテナへの距離を設定します：

div {
  scroll-margin-inline-start: 20px;
}

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

例 2

当 <div> 要素の writing-mode 属性値がvertical-rlに設定された場合、インライン方向は下向きになります。結果として、要素の開始位置は左側から上方向に移動します：

div {
  scroll-margin-inline-start: 20px;
  writing-mode: vertical-rl;
}

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

例 3

当 <div> 要素の direction 属性値がrtlに設定された場合、インライン方向は右から左になります。結果として、要素の開始位置は左側（元の方向に対して言えば、実際には右側から始まるものの、ここでの「左側」はデフォルトの方向（ltr）の左側を指します）に調整されます：

div {
  scroll-margin-inline-start: 20px;
  direction: rtl;
}

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

CSS 文法

inset-inline-start: 0|value|initial|inherit;

属性値

技術的詳細

ブラウザのサポート

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

関連ページ

参照：CSS direction 属性

参照：CSS scroll-snap-align 属性

参照：CSS scroll-snap-type 属性

参照：CSS writing-mode 属性