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

scroll-padding-leftプロパティは、スクロールコンテナ内におけるスクロールスナップのターゲット位置に左側のパディング（余白）を設定するために使用するプロパティです。このプロパティの主な目的は、ユーザーがスクロールスナップ機能によって特定の要素までスクロールした際に、その要素の左端が固定された要素（例えば、Webページの左側に固定されたサイドメニューや広告など）に隠れてしまうことを防ぎ、常に完全に表示されるようにすることです。

具体的には、スクロールコンテナがコンテンツをスクロール表示する際に、スクロールの基準点となる位置から指定された分だけ左側に空間を確保します。これにより、スクロールスナップによって要素がビューポート（表示領域）の左端に揃えられる際、その要素が指定されたパディング分だけ内側にずれて表示されます。

値は長さを示す単位（例えば、px、em、rem、%など）で指定します。例えば、scroll-padding-left: 100px;と設定すると、スクロールスナップのターゲット位置から左へ100ピクセルの余白が確保されます。この設定は、特に左側に固定幅のナビゲーションバーなどがある場合に有効で、スクロール先のコンテンツがその固定要素によって隠れることなく、常にユーザーに見やすい位置に配置されるように調整できます。

このプロパティは、scroll-padding-top、scroll-padding-right、scroll-padding-bottomといった関連プロパティとともに、スクロールスナップ時の表示オフセットを詳細に制御するために用いられます。また、これら全ての辺のパディングを一括で設定するscroll-paddingというショートハンドプロパティも利用可能です。Webページのユーザーエクスペリエンスとアクセシビリティを向上させる上で重要な役割を果たし、コンテンツの視認性を高めるために活用されます。

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

引数なし

引数はありません

戻り値なし

戻り値はありません