【CSS Modules】scroll-margin-block-startプロパティの使い方

scroll-margin-block-startプロパティは、CSS Modulesにおいて、スクロールスナップの対象となる要素のブロック軸開始端に適用されるスクロールマージンの値を保持するプロパティです。

このプロパティは、スクロールコンテナ内で要素が特定の「スクロールスナップ位置」にスナップされる際に、その要素のブロック軸の開始端に適用されるオフセット（間隔）を指定します。具体的には、このプロパティは論理プロパティであり、CSSの書字方向（writing-mode）やテキストの向き（direction、text-orientation）によって、物理的なマージンの位置が決定されます。例えば、一般的な上から下へ、左から右へ読む書字モードでは、これは要素の上端に対するマージンとして機能します。しかし、縦書きのモードなどでは、他の物理的な端（例えば右端）に相当する場合もあります。

このプロパティに値を設定することで、スクロールスナップ時に要素がビューポートのブロック開始端に位置合わせされる際、指定した値の分だけ余白が確保されます。これは、固定されたヘッダーやツールバーなどがウェブページに存在する場合に特に有用です。スナップされたコンテンツがそれらの固定要素の下に隠れてしまうことを防ぎ、ユーザーがコンテンツ全体を視認できるように調整するために使用されます。scroll-snap-typeプロパティと組み合わせて利用することで、より洗練されたスクロール体験を提供することができます。

Copy
1selector {
2  scroll-margin-block-start: 10px;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません