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

scroll-padding-blockプロパティは、要素のスクロールポートにおけるブロック方向の開始側と終了側に適用されるスクロールパディングの値を保持するプロパティです。このプロパティは、スクロールコンテナ内で特定の要素へスクロールした際に、その要素の表示領域に余白を追加するために使用されます。これにより、固定されたヘッダーやフッター、サイドバーなどの他の要素がスクロールターゲットを隠してしまうことを防ぎ、ユーザーが目的のコンテンツを明確に見られるように調整できます。

scroll-padding-blockは論理プロパティであり、物理的な上下左右ではなく、コンテンツの書き込みモード（writing-modeやdirectionなどのCSSプロパティで定義されるテキストの流れる方向）によって決定されるブロック方向に基づいて機能します。具体的には、scroll-padding-block-startとscroll-padding-block-endという二つの個別プロパティのショートハンドとして働きます。例えば、一般的な横書きのウェブページ（writing-mode: horizontal-tb）では、scroll-padding-block-startが上方向のパディングに、scroll-padding-block-endが下方向のパディングに相当します。このように、ウェブサイトの多言語対応や多様なレイアウトモードにおいても、一貫したスクロールの挙動を直感的に制御できるよう設計されています。

このプロパティには、自動調整を意味するauto、具体的な長さを指定する<length>（例: 50px、2em）、または親要素に対する割合を示す<percentage>（例: 10%）といった値を指定することができます。スクロール時のユーザー体験を向上させるために重要な役割を果たすプロパティです。

Copy
1scroll-padding-block: 10px 20px;

引数なし

引数はありません

戻り値なし

戻り値はありません