CSS scroll-margin-inline 属性

定義と用法

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

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

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

吸着位置とは、子要素が停止したときにコンテナに吸着する位置のことです。

scroll-margin-inline 属性は以下の属性のショートカット属性です：

• scroll-margin-inline-start
• scroll-margin-inline-end

scroll-margin-inline属性に値が2つある場合：

scroll-margin-inline: 20px 70px;

• 開始位置の距離は20pxです
• 終了位置の距離は70pxです

scroll-margin-inline属性に値が1つある場合：

scroll-margin-inline: 20px;

• 開始位置と終了位置の距離はそれぞれ20pxです

見るために scroll-margin-inline 属性の効果は、子要素上に設定する必要があります scroll-margin-inline および 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

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

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

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

例2

when <div> element's writing-mode 属性値がvertical-rlに設定されている場合、インライン方向は下です。結果として、要素の開始位置は左から上に、要素の終了位置は右から下に移動します。これも以下に影響を与えます。 scroll-margin-inline 属性：

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

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

例3

when <div> element's direction 属性値がrtlに設定されている場合、インライン方向は右から左です。結果として、要素の開始位置は左から右に、要素の終了位置は右から左に移動します。これも以下に影響を与えます。 scroll-margin-inline 属性：

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

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

CSSの構文

scroll-margin-inline: 0|value|initial|inherit;

属性値

技術的詳細

ブラウザのサポート

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

関連ページ

参照：CSS direction 属性

参照：CSS scroll-margin-inline-end 属性

参照：CSS scroll-margin-inline-start 属性

参照：CSS scroll-snap-align 属性

参照：CSS scroll-snap-type 属性

参照：CSS writing-mode 属性