CSS scroll-padding-right 属性

定義と使用方法

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

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

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

注意：此属性仅在吸附位置设置在子元素右侧时有效。

この属性は、吸着位置が子要素の右側に設定されている場合にのみ効果があります。 scroll-padding-right 属性を設定する必要があります。 scroll-snap-align 属性の効果を確認するには、子要素に scroll-padding-right 属性と、親要素にscroll-snap-align属性を設定し、子要素に scroll-snap-type 属性。

インスタンス

例1

スクロール内側マージンを、コンテナの右側から吸着位置までの距離が20pxに設定します：

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

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

例2：画像ライブラリ

scroll-padding-right 属性は、吸着動作を持つ画像ギャラリーに使用され、画像を固定要素の後ろから視界に入れることができます：

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

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

例3：右側に設定されたスクロール内側マージン

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

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

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

例4：吸着位置

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

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

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

CSSの構文

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

属性値

技術的詳細

ブラウザのサポート

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

関連ページ

参照：CSS direction 属性

参照：CSS scroll-snap-align 属性

参照：CSS scroll-snap-type 属性

参照：CSS writing-mode 属性