CSS scroll-padding-left 属性

定義と使用法

scroll-padding-left 属性は、コンテナの左側から子要素の吸着位置までの距離を指定します。

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

吸着位置は scroll-snap-align 属性の設定により、CSS属性 direction 属性と、親要素にscroll-snap-align属性を設定し、子要素に writing-mode の影響を受けます。

注意：この属性は、吸着位置が子要素の左側に設定されている場合にのみ有効です。

要するに scroll-padding-left 属性の効果を確認するには、子要素に scroll-snap-align 属性の効果を設定する必要があります scroll-padding-left 属性と、親要素にscroll-snap-align属性を設定し、子要素に scroll-snap-type 属性。

インスタンス

例 1

コンテナの左側から吸着位置までの距離を20pxに設定します：

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

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

例 2：画像ライブラリ

scroll-padding-left この属性は、吸着行動を持つ画像ギャラリーに使用され、画像を固定要素の後ろから視野内に押し出すために：

#container > img {
  scroll-padding-left: 30px;
}

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

例 3：左側に設定するスクロール内側マージン

両方の方向に吸着行動が設定されている場合、コンテナ上にも設定できます scroll-padding-left 属性。次の要素に水平にスクロールして効果を確認してください：

#container > div {
  scroll-padding-left: 30px;
}

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

例 4：吸着位置

するために scroll-padding-left 属性が効果を発揮し、吸着位置は子要素の左側に設定する必要があります。この例では、direction 属性的値 'rtl' は、子要素の左側から右側への位置を吸着位置に変更します。このようなコードを使用する場合、scroll-padding-left この属性はもはや効果がありません：

#container {
  direction: rtl;
  scroll-padding-left: 30px;
}
#container > div {
  scroll-snap-align: none start;
}

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

CSS 文法

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

属性値

技術的詳細

ブラウザのサポート

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

関連ページ

参照：CSS direction 属性

参照：CSS scroll-snap-align 属性

参照：CSS scroll-snap-type 属性

参照：CSS writing-mode 属性