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

scroll-padding-bottomプロパティは、スクロールコンテナがスクロールスナップ位置に到達したときに、その下端にオフセット（パディング）を適用する値を保持するプロパティです。このプロパティは、CSS Modules仕様の一部として提供されており、ウェブページやアプリケーションにおけるスクロール体験の向上を目的としています。

具体的には、scroll-snap-typeプロパティなどで定義されたスクロールスナップのターゲット要素が、スクロールコンテナのビューポート内にスナップする際、そのターゲット要素の下部に指定されたスペースを設けることができます。これにより、コンテンツが固定されたフッターやその他のオーバーレイ要素によって隠れることなく、常に完全に表示されるように調整することが可能です。例えば、長いリストアイテムが画面下端にスナップする際に、その直下に配置されたフッター要素によって一部が隠れてしまうような状況を防ぐために使用されます。

このプロパティに設定できる値は、pxやem、remなどの長さの単位、またはパーセンテージ（%）です。また、初期値であるautoを指定すると、ユーザーエージェント（ブラウザ）が適切なパディングを自動的に決定します。scroll-padding-bottomは、scroll-padding-topやscroll-padding-left、scroll-padding-rightといった他のscroll-padding関連プロパティと組み合わせて使用することで、スクロールスナップ時のパディングをより詳細に制御できます。これらのプロパティは、ショートハンドのscroll-paddingプロパティとしてまとめて指定することも可能です。スクロールスナップ機能と合わせて活用することで、ユーザーにとってより視覚的に分かりやすく、スムーズなスクロール体験を提供することができます。

Copy
1scroll-padding-bottom: <length-percentage>;

引数なし

引数はありません

戻り値なし

戻り値はありません