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

scroll-margin-inline-endプロパティは、スクロールスナップが適用されるスクロールコンテナ内で、特定の要素がスナップ位置に配置される際に適用される論理的なオフセット（余白）を保持するプロパティです。このプロパティは、CSS Scroll Snapモジュールの一部として定義されており、ユーザーがスクロール操作を行ったときに、コンテンツが意図した位置に「スナップ」（ぴったりと吸着）するように動作を制御します。

具体的には、inline-endというキーワードが示す通り、ドキュメントの書き込みモード（テキストの表示方向）における行の終端側（例えば、左から右への言語では右側、右から左への言語では左側）に、指定された長さのオフセットを追加します。これにより、スクロールスナップのターゲットとなる要素が、スクロールコンテナの端にぴったりと吸着するのではなく、指定した分だけ内側にずれて表示されるようになります。

この機能は、例えばウェブページのヘッダーやフッター、固定されたツールバーなどがコンテンツの一部を覆い隠してしまう場合に非常に有用です。scroll-margin-inline-endプロパティに適切な値を設定することで、スナップされた要素がそれらの固定要素の下に隠れることなく、常に完全に視認できる状態で表示されるように調整できます。

値としては、px、rem、emなどの長さ単位や、%（パーセンテージ）などを指定できます。負の値も有効で、スナップ位置を通常の場所よりもさらに要素の内側に引き込むような効果をもたらします。これは論理プロパティであるため、ドキュメントの書き込みモードや方向（direction、writing-mode）の設定に応じて、物理的な位置（右、左など）が自動的に決定されるため、国際化対応にも優れています。

Copy
1.element {
2  scroll-margin-inline-end: 20px;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません