CSS scroll-padding-inline 属性

定義と用法

scroll-padding-inline 属性は、行内方向上で、コンテナから子要素の吸附位置への距離を指定します。

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

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

吸附位置とは、あなたがスクロールを停止したとき、子要素がコンテナ内に吸附される位置のことです。

注意：この属性は行内方向上でのみ、scroll-snap-align 属性が 'start' または 'end' に設定されている場合にのみ有効です。

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

• scroll-padding-inline-start
• scroll-padding-inline-end

scroll-padding-inline 属性の値は以下の方法で設定できます：

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

scroll-padding-inline: 10px 50px;

• 先頭の距離が 10px です
• 終わりの距離が 50px です

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

scroll-padding-inline: 10px;

• 先頭と終わりの距離がすべて 10px です

必要です。 scroll-padding-inline 属性の効果を見るには、子要素上で設定 scroll-snap-align 属性、並びに親要素上で設定 scroll-padding-inline そして scroll-snap-type 属性。

CSSの scroll-padding-block そして scroll-padding-inline 属性と CSS 属性 CSS scroll-padding-top 属性、scroll-padding-bottom、scroll-padding-left そして scroll-padding-right 非常に似ていますが、 scroll-padding-block そして scroll-padding-inline 属性はブロック方向とインライン方向に依存します。

インスタンス

例1

インライン方向のスクロールインラインパディングを設定し、コンテナからアタッチメント位置まで20px：

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

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

例2：画像ライブラリ

アタッチメント行動を持つ画像ギャラリーで、以下を使用できます： scroll-padding-inline 属性は画像を固定要素の後ろから押し出します：

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

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

例3

コンテナ要素の writing-mode 属性値が 'vertical-rl' に設定された場合、インライン方向のコンテナと子要素のスタート位置が左側から上方向に、エンド位置が右側から下方向に移動します。これにより、スクロールアタッチメントの行動および scroll-padding-inline 属性の動作方法：

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

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

例4

コンテナ要素の direction 属性値が 'rtl' に設定された場合、インライン方向のコンテナと子要素のスタート位置が右側から左側に移動します。これにより、スクロールアタッチメントの行動および scroll-padding-inline 属性の動作方法：

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

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

CSS文法

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

属性値

技術的詳細

ブラウザのサポート

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

関連ページ

参照：CSS direction 属性

参照：CSS scroll-snap-align 属性

参照：CSS scroll-snap-type 属性

参照：CSS writing-mode 属性