【CSS Modules】scroll-padding-block-endプロパティの使い方
scroll-padding-block-endプロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
scroll-padding-block-endプロパティは、スクロールコンテナ（スクロール可能な要素）のブロック方向の末尾側に、スクロールスナップの目標位置を調整するためのパディング（余白）を設定するプロパティです。
このプロパティは、CSSスクロールスナップ機能と組み合わせて使用されます。スクロールスナップとは、ユーザーがスクロールした際に、特定の要素がビューポート（表示領域）内の指定された位置に自動的にピタッと止まる機能です。scroll-padding-block-endで設定された値は、スクロールスナップの目標位置にオフセットとして適用されます。これにより、コンテンツがスクロールコンテナの末尾の端にぴったりとくっつきすぎたり、固定されたフッターなどの他のUI要素と重なったりするのを防ぎます。
block-endという名称は、writing-modeプロパティで指定される書字方向に基づいて決まる論理的な方向を指します。例えば、一般的な横書き（writing-mode: horizontal-tb）のウェブページでは、このプロパティはスクロールコンテナの下端にパディングを設定することと同義です。縦書きの場合は、これに対応する末尾の方向が適用されます。
結果として、スクロールスナップが適用されたコンテンツが常に読みやすく、視覚的に適切な位置に表示されるようになり、ウェブサイトのユーザー体験を向上させる効果があります。
公式リファレンス: scroll-padding-block-end
構文(syntax)
1selector { 2 scroll-padding-block-end: <length-percentage>; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません