CSS scroll-margin-left 属性

定義と用法

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

属性で指定された吸着位置とコンテナの間の距離を指定します。 scroll-snap-align 吸着位置とは、子要素が停止したときに、コンテナ内で固定される位置のことです。吸着位置は、 direction および 属性の設定、また CSS 属性 writing-mode

の影響を受ける可能性があります。注意：

この属性が効果を発揮するためには、吸着位置が子要素の左側に設定されている必要があります。 scroll-margin-left 属性の効果を設定する場合、子要素に scroll-margin-left および scroll-snap-align 属性を設定し、親要素に scroll-snap-type 属性。

インスタンス

例 1

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

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

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

例 2：画像ライブラリ

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

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

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

例 3：吸着位置

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

#container {
  direction: rtl;
}
#container > div {
  scroll-margin-left: 30px;
  scroll-snap-align: none start;
}

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

CSS 言語

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

属性値

技術的詳細

ブラウザのサポート

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

関連ページ

参照：CSS direction 属性

参照：CSS scroll-snap-align 属性

参照：CSS scroll-snap-type 属性

参照：CSS writing-mode 属性