CSS scroll-margin-right 属性

定義と用法

scroll-margin-right 属性で指定されたアドヒシブ位置とコンテナ間の距離を指定します。

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

注意：この属性は、アドヒシブ位置が子要素の右側に設定されている場合にのみ効果があります。

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

例

例1

アドヒシブ位置とコンテナ間のスクロールマージンを20pxに設定します：

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

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

例2：画像ライブラリ

scroll-margin-right 属性は、アドヒシブ動作を持つ画像ギャラリーで使用できます。ここでは、scroll-margin-right ユーザーに右側に画像があることを知らせます。最初の画像をスライドして効果を確認してください：

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

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

例3：アドヒシブ位置

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

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

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

CSS文法

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

属性値

技術的詳細

ブラウザのサポート

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

関連ページ

参照：CSS direction 属性

参照：CSS scroll-snap-align 属性

参照：CSS scroll-snap-type 属性

参照：CSS writing-mode 属性