スクロールの位置を調整するCSS【scroll-padding】

scroll-padding はCSSのプロパティで、要素のスクロールスナッピング位置を調整するために使用されます。スクロールスナッピングとは、ユーザーがスクロール操作を行ったときに、特定の位置でスムーズに止まるようにする機能です。scroll-padding はこのスナッピング位置に余白を追加し、要素がビューポートにどのように表示されるかを調整できます。ヘッダー上部に固定するメニューがあるときなどに便利です。

基本構文

.scroll-container {
scroll-padding: 20px; /* 上下左右に20pxの余白を追加 */
}

プロパティの詳細

scroll-padding-top, scroll-padding-right, scroll-padding-bottom, scroll-padding-left といった個別のプロパティで、四辺の余白を個別に設定できます。

このプロパティは、特に スムーズスクロール や CSS Scroll Snap と一緒に使用されることが多いです。

使用例

1. ヘッダー固定ナビゲーションへの対応

スクロールスナップを使ってセクションにジャンプするとき、固定されたナビゲーションバーがあると、その高さ分のコンテンツが隠れてしまうことがあります。この場合、scroll-padding-top を設定することで、スクロール位置を調整し、隠れるのを防ぐことができます。

html {
scroll-padding-top: 50px; /* 固定ナビゲーションの高さに合わせた余白 */
}

2. 横方向のスクロールスナップ

水平方向にスクロールするコンテナに対して、スナップ位置を調整することができます。

scroll-container {
scroll-snap-type: x mandatory;
scroll-padding-left: 10px; /* 左側に余白を追加 */
}

注意点

scroll-padding は スクロールコンテナ に適用する必要があります。通常は overflow が設定されている要素に適用します。

このプロパティは、スクロールの「見た目」だけでなく、ユーザーが操作する際のスクロール位置を調整するため、ユーザーエクスペリエンスに大きな影響を与えます。