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

scroll-padding-block-startプロパティは、スクロールコンテナの視認可能な領域において、論理的なブロックの開始方向に対するパディングのオフセット値を保持するプロパティです。このプロパティは、スクロールスナップのターゲット位置や、URLフラグメントによるページ内リンクのターゲット位置を調整するために用いられます。

Webページ内で特定の要素へスクロールした際、その要素がスクロールコンテナの端にぴったりと揃いすぎると、コンテンツの一部が見切れてしまったり、固定されたヘッダーやフッターの影に隠れてしまったりする場合があります。scroll-padding-block-startプロパティを使用すると、ターゲットとなる要素が表示される際に、ブロックの開始方向から指定された分のパディングが適用されるため、このような問題を回避し、コンテンツ全体を適切に視認できるようになります。

「ブロックの開始方向」とは、CSSのwriting-modeプロパティによって定義されるテキストの進行方向を指します。一般的な横書きのWebページ（writing-mode: horizontal-tb;）では、この「ブロックの開始方向」は物理的な「上方向」に相当します。したがって、このプロパティに値を設定すると、スクロール時にターゲット要素がスクロールコンテナの上端から指定された距離だけ離れて表示されることになります。

このプロパティには、pxやem、remなどの長さ単位、または%（パーセンテージ）といった値を指定できます。これにより、開発者はデバイスの特性やデザイン要件に応じて、柔軟にスクロール時の表示位置を調整し、より良いユーザーエクスペリエンスを提供できます。スクロール時にコンテンツの視認性を高め、ユーザーがスムーズに情報を追えるようにするための重要なツールの一つと言えます。

Copy
1selector {
2  scroll-padding-block-start: <length> | <percentage>;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません