CSS scroll-margin-inline-end 属性

定義と用法

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

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

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

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

注意：注意： scroll-snap-align この属性はインライン方向にのみ設定されています。

属性が'end'の場合にのみ効果があります。 scroll-margin-inline-end 属性の効果を設定する必要がありますが、子要素で scroll-margin-inline-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

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

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

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

例2

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

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

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

例3

当 <div> 要素の direction 属性値がrtlに設定された場合、インライン方向は右から左です。結果として、要素の端が右側から左側に移動します：

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

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

CSS文法

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

属性値

技術的詳細

ブラウザのサポート

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

関連ページ

参照：CSS direction 属性

参照：CSS scroll-snap-align 属性

参照：CSS scroll-snap-type 属性

参照：CSS writing-mode 属性