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

scroll-margin-block-endプロパティは、スクロールスナップの対象となる要素に対して、ブロック方向の終端側にスクロールマージンを設定するプロパティです。

このプロパティは、CSSのスクロールスナップ機能を使用する際に、特にその効果を発揮します。要素がスクロールコンテナのスクロールスナップ位置にスナップされる際、その要素のブロック方向の終端とスクロールポート（スクロール可能な領域）の終端との間に確保されるべき余白の量を定義します。これにより、スクロールスナップでコンテンツがピタッと停止する際、指定された距離だけ終端から離れた位置で停止するようになります。

ここで言う「ブロック方向の終端」とは、ウェブページのテキストの書き込みモードによって決まる論理的な方向を指します。例えば、日本語や英語のような横書きの言語では、通常、要素の下端（物理的なbottom）に相当します。一方、縦書きの言語が使われる場合など、書き込みモードによっては要素の右端（物理的なright）を指すこともあります。このように、物理的な上下左右ではなく、コンテンツの流れる方向に基づいて終端が決定されるため、国際化されたウェブサイトでも一貫した挙動を提供できます。

具体的な利用シーンとしては、ウェブサイトに固定ヘッダーや固定フッターが存在する場合が挙げられます。スクロールスナップを用いて特定のセクションへ移動した際に、そのセクションのコンテンツが固定ヘッダーやフッターによって隠れてしまわないよう、scroll-margin-block-endプロパティで適切な余白を設定することで、コンテンツ全体を確実に視認できるように調整できます。

このプロパティには、px、em、remといったCSSの長さの単位で値を指定します。適切なマージンを設定することで、ユーザーは快適にコンテンツを閲覧できるようになり、ウェブサイトのユーザビリティ向上に貢献します。

Copy
1.element {
2  scroll-margin-block-end: 10px;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません