CSS scroll-margin-top 属性

定義と用法

scroll-margin-top 属性で指定された吸附位置とコンテナの間の距離を指定します。

吸附位置は、子要素が停止したときに、コンテナ内に固定される位置です。吸附位置は scroll-snap-align 属性の設定だけでなく、CSS属性 direction および writing-mode の影響を受ける可能性があります。

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

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

インスタンス

例1

吸附位置とコンテナの間の顶部スクロールマージンを20pxに設定します：

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

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

例2：画像ライブラリ

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

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

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

例3：吸附位置

このようにするために scroll-margin-top この属性が効果を発揮し、吸附位置は子要素の顶部に設定する必要があります。この例では、writing-mode この属性は、子要素の右側に位置を変更します。このようなコードを使用すると、scroll-margin-top この属性はもはや効果がありません：

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

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

CSSの構文

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

属性値

技術的詳細

ブラウザのサポート

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

関連ページ

参照：CSS direction 属性

参照：CSS scroll-snap-align 属性

参照：CSS scroll-snap-type 属性

参照：CSS writing-mode 属性