CSS scroll-margin-bottom 属性

定義と用法

scroll-margin-bottom 属性指定吸附位置与容器之间的距离。

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

吸着位置は scroll-snap-align 属性の設定だけでなく、CSS属性 direction 属性と writing-mode の影響を受けます。

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

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

インスタンス

例1

吸着位置とコンテナ間のスクロールの下外側マージンを20pxに設定します：

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

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

例2：画像ライブラリ

scroll-margin-bottom 属性は、吸着行動を持つ画像ギャラリーに使用できます。この例では、scroll-margin-bottom ユーザーに下部に画像があることを知らせるために。最初の画像をスクロールして効果を確認してください：

#container > img {
  scroll-margin-bottom: 30px;
}

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

例3：吸着位置

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

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

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

CSS文法

scroll-margin-bottom: 0|value|initial|inherit;

属性値

技術的詳細

ブラウザのサポート

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

相关页面

参考：CSS direction 属性

参考：CSS scroll-snap-align 属性

参考：CSS scroll-snap-type 属性

参考：CSS writing-mode 属性