CSS scroll-padding 属性

定義と用法

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

これは、スクロールを停止したとき、スクロールが急速に調整して、コンテナから焦点の子要素の吸着位置までの指定された距離に停止するという意味です。

吸着位置とは、子要素が停止した際に、コンテナ内で固定された位置を指します。

scroll-padding この属性は以下の属性の短縮形です：

• scroll-padding-top
• scroll-padding-bottom
• scroll-padding-left
• scroll-padding-right

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

scroll-padding 属性が 4 値を持っている場合：

scroll-padding: 15px 30px 60px 90px;

• トップの距離は 15px です
• 右側の距離は 30px です
• ボトムの距離は 60px です
• 左側の距離は 90px です

scroll-padding 属性が 3 値を持っている場合：

scroll-padding: 15px 30px 60px;

• トップの距離は 15px です
• 左側と右側の距離が30pxです
• ボトムの距離は 60px です

scroll-padding 属性が 2 値を持っている場合：

scroll-padding: 15px 30px;

• トップとボトムの距離は 15px です
• 左側と右側の距離が30pxです

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

scroll-padding: 10px;

• すべての4つの方向の距離が10pxです

効果を見るために scroll-padding 属性を設定することで、 scroll-snap-align 属性を設定し、子要素に scroll-padding 属性、および親要素に scroll-snap-type 属性。

注意：以下の例では、すべての側にスクロール内側マージンが設定されていますが、 scroll-snap-align 「start」に設定されているため、顶部のスクロール内側マージンのみがスクロール行動を変更します。

インスタンス

例1

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

div {
  scroll-padding: 20px;
}

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

例2：画像ライブラリ

scroll-padding 属性は、吸附行動を持つ画像ギャラリーで使用できます。画像を固定要素の下に押し下げるために：

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

固定のトップ要素

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

例3：底と右側のスクロール内側マージンを設定

scroll-padding 属性は、コンテナの底と右側に同時に設定できます。次の要素に水平および垂直にスクロールして効果を確認してください：

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

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

CSS 言語

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

属性値

技術的詳細

ブラウザのサポート

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

関連ページ

参照：CSS scroll-padding-bottom 属性

参照：CSS scroll-padding-left 属性

参照：CSS scroll-padding-right 属性

参照：CSS scroll-padding-top 属性

参照：CSS scroll-snap-align 属性

参照：CSS scroll-snap-type 属性