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

scroll-margin-inline-startプロパティは、CSSスクロールスナップにおいて、スクロールコンテナの論理的な開始位置におけるスクロールスナップ領域のマージンを保持するプロパティです。このプロパティは、scroll-snap-typeが設定されたスクロールコンテナ内で、子要素のスクロールスナップ位置を調整するために使用されます。

具体的には、スクロールコンテナがスナップする要素を配置する際、その要素の論理的な開始側（例えば、英語のような左から右に書く言語では左側）に指定したマージンを追加します。これにより、スクロールスナップによって特定の要素がビューポートの開始位置に揃えられた際に、その要素が固定されたヘッダーやツールバーなどによって隠れてしまうのを防ぐことができます。ユーザーがスクロールした際に、重要なコンテンツが欠けることなく適切に表示されるように、可視領域を確保するために非常に役立ちます。

このプロパティは物理的な方向（top, right, bottom, left）に依存せず、writing-modeやdirectionといったプロパティの値に基づいて、文章の開始方向に合わせて自動的に調整されます。例えば、writing-modeがhorizontal-tb（水平方向、上から下）かつdirectionがltr（左から右）の場合、scroll-margin-inline-startはscroll-margin-leftと同じ効果を発揮します。これにより、多言語対応や様々なレイアウト方向を持つウェブサイトでも、一貫したスクロールスナップ体験を提供することが可能になります。設定可能な値は、pxやremなどの長さの単位です。

Copy
1.element {
2  scroll-margin-inline-start: 10px;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません