概要

scroll-padding-inlineは、CSSでスクロール位置の横方向の内側余白（パディング）を設定するためのプロパティです。インライン方向（左右）に余白を追加することで、要素がスクロールされた際の表示位置を調整できます。特にscroll-snapと組み合わせて使用することで、要素がスクロールされたときに左右に適切な余白を持たせることができ、ユーザーの視認性を向上させることが可能です。

scroll-padding-inlineの基本構文

scroll-padding-inline: <length>;

または、左右のパディングを個別に指定できます。

scroll-padding-inline: <left-padding> <right-padding>;

• length
  左右のパディングを指定する値です。px、em、rem、%などの単位で設定できます。

値の説明

• px（ピクセル）
  絶対的な長さを指定する一般的な単位です。例えば、scroll-padding-inline: 20px;と設定すると、左右に20pxのパディングが追加されます。
• em、rem
  フォントサイズに基づく相対単位で、レスポンシブデザインに適しています。
• %（パーセント）
  コンテナの幅に対する相対的なパディングを指定できます。

使用例

基本的な使用例 - 横方向のスクロール位置の内側余白を設定

以下のコードは、要素がスクロールされたときに左右の内側に余白を設定する例です。

.container {
    scroll-padding-inline: 20px; /* 左右に20pxのパディング */
}

この設定により、.container内の要素がスクロールされる際に左右に20pxの余白が追加されます。

個別に左右のパディングを指定する

左側に30px、右側に10pxの内側余白を個別に設定する例です。

.container {
    scroll-padding-inline: 30px 10px;
}

この設定により、左側に30px、右側に10pxのパディングがそれぞれ追加され、スクロール時の表示位置が調整されます。

スクロールスナップと組み合わせる例

scroll-padding-inlineは、scroll-snap-typeと組み合わせることで、スクロール位置の調整に役立ちます。要素がスナップされた際に、適切な位置で表示されるように調整することが可能です。

.scroll-area {
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 50px; /* スクロールスナップ時に左右50pxのパディング */
}

この設定により、スクロールスナップを使用する際に要素が左右50pxの余白を持ってスナップされ、見やすくなります。

カルーセルやスライダーでの使用例

カルーセルやスライダーでのアイテム表示時に、スクロール位置を調整するためにscroll-padding-inlineを使用できます。

.slider-item {
    scroll-padding-inline: 5%;
}

この設定により、スライダー内の各アイテムがスクロールされたときに、左右に5%の余白を持ってスクロールされ、コンテンツが見やすく表示されます。

注意点

• scroll-padding-inlineは、実際のレイアウトパディングには影響せず、スクロール位置に対してのみ作用するプロパティです。視覚的な余白とは異なるため、注意が必要です。
• 特に横スクロールが必要なナビゲーションやコンテンツビューで、スクロール位置の調整が必要な場面で有効です。
• scroll-snap機能と組み合わせると、スクロール位置の視認性がさらに向上し、要素が左右にちょうどよく収まるように配置されます。

まとめ

scroll-padding-inlineは、CSSで要素の横方向のスクロール位置を調整するためのプロパティで、スクロールされた際の表示位置を簡単にカスタマイズできます。特に、scroll-snapやスライダー、カルーセルなどの横スクロールが関わるデザインにおいて、ユーザーの視認性を向上させる効果があります。ページの横方向のスクロール調整が必要な場面で、ぜひこのプロパティを活用してください。