scroll-padding

例

基本的な例

scroll-pt-<number>、scroll-pr-<number>、scroll-pb-<number>、およびscroll-pl-<number>ユーティリティをscroll-pl-4やscroll-pt-6のように使用して、スナップコンテナ内の要素のスクロールオフセットを設定します。

画像のグリッドをスクロールして、期待される動作を確認してください。

<div class="snap-x scroll-pl-6 ...">
  <div class="snap-start ...">
    <img src="/img/vacation-01.jpg" />
  </div>
  <div class="snap-start ...">
    <img src="/img/vacation-02.jpg" />
  </div>
  <div class="snap-start ...">
    <img src="/img/vacation-03.jpg" />
  </div>
  <div class="snap-start ...">
    <img src="/img/vacation-04.jpg" />
  </div>
  <div class="snap-start ...">
    <img src="/img/vacation-05.jpg" />
  </div>
</div>

論理プロパティの使用

scroll-ps-<number>およびscroll-pe-<number>ユーティリティを使用して、scroll-padding-inline-startおよびscroll-padding-inline-end論理プロパティを設定します。これらは、テキストの方向に基いて左側または右側のいずれかにマッピングされます。

画像のグリッドをスクロールして、期待される動作を確認してください。

左から右

右から左

<div dir="ltr">
  <div class="snap-x scroll-ps-6 ...">
    <!-- ... -->
  </div>
</div>
<div dir="rtl">
  <div class="snap-x scroll-ps-6 ...">
    <!-- ... -->
  </div>
</div>

負の値の使用

負のスクロールパディング値を使用するには、クラス名の先頭にダッシュを付けて負の値に変換します。

<div class="-scroll-ps-6 snap-x ...">
  <!-- ... -->
</div>

カスタム値の使用

次のようなユーティリティを使用します scroll-pl-[<value>] および scroll-pe-[<value>]を設定するにはスクロールパディング完全にカスタムの値に基づいて

<div class="scroll-pl-[24rem] ...">
  <!-- ... -->
</div>

CSS変数には、次のものも使用できます。 scroll-pl-(<custom-property>) 構文

<div class="scroll-pl-(--my-scroll-padding) ...">
  <!-- ... -->
</div>

これは単なる scroll-pl-[var(<custom-property>)] の省略形で、var()関数を自動的に追加します。

レスポンシブデザイン

プレフィックスa scroll-paddingユーティリティ md:のようなブレークポイントバリアントを付けて、ユーティリティを適用するのはmedium 画面サイズ以上の場合のみにします

<div class="scroll-p-8 md:scroll-p-0 ...">
  <!-- ... -->
</div>

バリアントの使用方法の詳細については、バリアントのドキュメントをご覧ください。

テーマのカスタマイズ

The scroll-p-<number>、scroll-px-<number>、scroll-py-<number>、scroll-ps-<number>、scroll-pe-<number>、scroll-pt-<number>、scroll-pr-<number>、scroll-pb-<number>、およびscroll-pl-<number>ユーティリティは、--spacingテーマ変数によって駆動され、これは独自のテーマでカスタマイズできます

@theme {
  --spacing: 1px; 
}

スペーシングスケールのカスタマイズの詳細については、テーマ変数のドキュメントをご覧ください。