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

scroll-margin-leftプロパティは、CSS Modulesにおいて、スクロールスナップ時に要素の左側に設定される仮想的なマージンの値を保持するプロパティです。このプロパティは、ユーザーがスクロール可能なコンテナ内で特定の要素に「ピタッと」吸着させるスクロールスナップ機能を利用する際に、その吸着位置を微調整するために用いられます。具体的には、スクロールコンテナの左端から、スナップターゲットとなる要素の左端までの間に、指定した長さのオフセット（余白）を設けることができます。

この機能は、特に固定ヘッダーやサイドバーなどが存在するウェブページで非常に役立ちます。例えば、ページ上部に固定されたナビゲーションバーがある場合、スクロールスナップによってコンテンツがビューポートの最上部に吸着しても、そのコンテンツの一部がナビゲーションバーの下に隠れてしまうことがあります。scroll-margin-leftプロパティをスナップターゲットとなる要素に適用し、固定ナビゲーションバーの幅に合わせた値を設定することで、コンテンツが隠れることなく、常に適切な位置で表示されるように調整できます。

設定できる値は、px、em、remなどの長さの単位で指定します。これにより、スクロールスナップによって要素がビューポートに吸着する際、左端から指定された距離だけ内側に仮想的なマージンが確保され、より洗練されたユーザーインターフェースと直感的なスクロール体験を提供することが可能になります。このプロパティは、水平方向のスクロールを伴うカルーセルやギャラリーなどで、ユーザーエクスペリエンスを向上させるための重要なツールです。関連するプロパティには、他の方向のマージンを調整するscroll-margin-top、scroll-margin-right、scroll-margin-bottomなどがあります。

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

引数なし

引数はありません

戻り値なし

戻り値はありません