CSS scroll-padding-bottom 属性

定義と用法

scroll-padding-bottom 属性でコンテナの底部から子要素のアダプト位置までの距離を指定します。

アダプト位置とは、スクロールを停止したときに子要素がコンテナ内にアダプトされる位置のことです。アダプト位置は以下で指定されます。 scroll-snap-align 属性設定ではありますが、CSS属性によっても影響を受ける可能性があります。 direction と writing-mode の影響。

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

次に、 scroll-padding-bottom この属性の効果を子要素上で設定する必要があります。 scroll-snap-align この属性、および親要素上でscroll-snap-align属性を設定し、 scroll-padding-bottom と scroll-snap-type この属性。

インスタンス

例1

コンテナの下部から吸着位置までのスクロールフィルリングを20pxに設定します：

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

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

例2：画像ライブラリ

吸着行動を持つ画像ギャラリーで、 scroll-padding-bottom この属性は、固定要素の上に画像を押し出します：

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

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

例3：底部スクロールフィルリングの設定

二つの方向に吸着行動を設定する場合、コンテナ上に scroll-padding-bottom この属性。次の要素に垂直にスクロールして効果を確認してください：

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

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

例4：吸着位置

次に、 scroll-padding-bottom この属性が有効になり、吸着位置は子要素の下部に設定する必要があります。この例では、writing-mode この属性は、子要素の下部から左側に吸着位置を変更します。このようなコードを使用する場合、scroll-padding-bottom この属性はもはや機能しません：

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

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

CSS文法

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

属性値

技術的詳細

ブラウザのサポート

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

関連ページ

参照：CSS direction 属性

参照：CSS scroll-snap-align 属性

参照：CSS scroll-snap-type 属性

参照：CSS writing-mode 属性