CSS scroll-padding-inline-start 属性

定義と使用方法

scroll-padding-inline-start 属性は、行内方向上でコンテナの起点から子要素のアダプト位置までの距離を指定します。

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

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

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

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

表示される scroll-padding-inline-start 属性の効果を表示するには、子要素上で設定する必要があります。 scroll-snap-align 属性を設定し、親要素上で scroll-padding-inline-start および scroll-snap-type 属性。

インスタンス

例1

コンテナの開始位置からアテンション位置までの行内方向のスクロール内余白を20pxに設定します：

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

実際に試してみてください

例2：画像ライブラリ

scroll-padding-inline-start この属性は、アテンションのある画像ギャラリーで使用され、画像を固定要素の後ろから押し出すために使用されます：

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

実際に試してみてください

例3

コンテナ要素の writing-mode 属性値が 'vertical-rl' に設定されている場合、行内方向上のコンテナと子要素の開始位置が上部から右側に移動します。これにより、スクロールアテンションの動作および scroll-padding-inline-start 属性の動作方法：

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

実際に試してみてください

例4

コンテナ要素の direction 属性値が 'rtl' に設定されている場合、行内方向上のコンテナと子要素の開始位置が右側から左側に、終了位置が右側から下部に移動します。これにより、スクロールアテンションの動作および scroll-padding-inline 属性の動作方法：

#container {
  scroll-padding-inline-start: 20px;
  diretion: rtl;
}

実際に試してみてください

CSSの構文

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

属性値

技術的詳細

ブラウザのサポート

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

関連ページ

参照：CSS direction 属性

参照：CSS scroll-snap-align 属性

参照：CSS scroll-snap-type 属性

参照：CSS writing-mode 属性