CSS scroll-padding-inline-end 属性

定義と使用方法

scroll-padding-inline-end 属性は、コンテナの端から子要素のアライメント位置までの行内方向上の距離を指定します。

これは、スクロールを停止したとき、スクロールがアライメント位置とコンテナ間の指定された距離に急速に調整し停止することを意味します。

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

アライメント位置とは、スクロールを停止したとき、子要素がコンテナ内でアライメントされる位置を指します。

注意：この属性は、以下の scroll-snap-align 属性が行内方向に「end」設定されている場合にのみ効果があります。

見るために scroll-padding-inline-end 属性の効果を子要素に設定する必要があります。 scroll-snap-align 属性を、親要素に設定し、 scroll-padding-inline-end および scroll-snap-type 属性。

インスタンス

例1

コンテナの端からアライメント位置までのインライン方向のスクロール内余白を20pxに設定します：

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

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

例2：画像ライブラリ

scroll-padding-inline-end この属性は、アライメント行動を持つ画像ギャラリーで使用できるため、画像を固定要素の後ろから押し出すことができます：

#container {
  scroll-padding-inline-end: 30px;
}

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

例3

コンテナ要素の writing-mode 属性値が 'vertical-rl' に設定された場合、インライン方向上のコンテナと子要素の始点が左から上に移動し、端が右から下に移動します。これはスクロールアライメントの行動に影響を与えます。 scroll-padding-inline-end 属性の動作方法：

#container {
  scroll-padding-inline-end: 20px;
  writing-mode: vertical-rl;
}

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

例4

コンテナ要素の direction 属性値が 'rtl' に設定された場合、インライン方向上のコンテナと子要素の端が右から左に移動します。これはスクロールアライメントの行動に影響を与えます。 scroll-padding-inline-end 属性の動作方法：

#container {
  scroll-padding-inline-end: 20px;
  direction: rtl;
}

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

CSS 文法

scroll-padding-inline-end: auto|value|initial|inherit;

属性値

技術的詳細

ブラウザのサポート

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

関連ページ

参照：CSS direction 属性

参照：CSS scroll-snap-align 属性

参照：CSS scroll-snap-type 属性

参照：CSS writing-mode 属性