CSS scroll-padding-top 属性

定義と使用法

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

停止ロール時、子要素がコンテナ内に吸着する位置を指します。

吸附位置は}} scroll-snap-align 属性の設定、さらにCSS属性 direction および writing-mode の影響を受ける可能性があります。

注意：この属性は、吸附位置が子要素の顶部に設定されている場合にのみ効果があります。

を確認するには scroll-padding-top 属性の効果を確認するには、子要素上に scroll-snap-align 属性が設定され、親要素上に scroll-padding-top および scroll-snap-type この属性

インスタンス

例1

スクロール内余白を、コンテナの顶部から吸附位置までの距離が20pxに設定します：

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

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

例2：画像ライブラリ

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

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

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

例3：顶部に設定されたスクロール内余白

2つの方向で吸附行動が設定されている場合、コンテナ上に scroll-padding-top この属性を使用して、次の要素まで垂直にスクロールして効果を確認してください：

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

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

例4：吸附位置

するために scroll-padding-top この属性が有効になり、吸附位置は子要素の顶部に設定する必要があります。この例では、writing-mode この属性を使用するときは、scroll-padding-top この属性はもはや効果を発揮しません：

#container {
  writing-mode: vertical-rl;
  scroll-padding-top: 30px;
}
#container > div {
  scroll-snap-align: start none;
}

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

CSS 言語

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

属性値

技術的詳細

ブラウザのサポート

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

関連ページ

参照：CSS direction 属性

参照：CSS scroll-snap-align 属性

参照：CSS scroll-snap-type 属性

参照：CSS writing-mode 属性