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

scroll-padding-topプロパティは、CSSにおいて、スクロール可能な要素のスクロールポートの表示領域のオフセット値を定義するために使用されるプロパティです。具体的には、スクロールコンテナの上端から、スクロールスナップの対象となる要素や、URLのフラグメント識別子（#id）によって指定されたターゲット要素が配置される位置までのパディング（余白）を保持します。このプロパティを使用することで、スクロールアクションが発生した際に、目的の要素がスクロールコンテナの固定されたヘッダーや他のオーバーレイ要素の下に隠れてしまうことを防ぎ、適切な位置に表示させることが可能になります。例えば、ウェブサイトに固定ヘッダーがある場合、アンカーリンクでページ内ジャンプした際に、ジャンプ先のコンテンツがヘッダーに隠れて読めなくなるという問題を解決できます。値は、px、em、remなどの長さを示す単位で指定します。このプロパティは、scroll-snap-typeやscroll-snap-alignといったCSSスクロールスナップ関連のプロパティと組み合わせて使用されることが多く、ユーザーエクスペリエンスを向上させる上で重要な役割を果たします。また、scroll-padding-right、scroll-padding-bottom、scroll-padding-leftといった他の方向のパディングプロパティや、それらをまとめて指定できるショートハンドのscroll-paddingプロパティも存在します。これらのプロパティは、スクロールの挙動をより細かく制御するために利用されます。

Copy
1scroll-padding-top: 100px;

引数なし

引数はありません

戻り値なし

戻り値はありません