scroll-margin

例

基本的な例

scroll-mt-<number>、scroll-mr-<number>、scroll-mb-<number>、およびscroll-ml-<number>ユーティリティ (例: scroll-ml-4 や scroll-mt-6) を使用して、スナップコンテナ内のアイテム周りのスクロールオフセットを設定します。

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

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

負の値の使用

負のスクロールマージン値を使用するには、クラス名にダッシュをプレフィックスとして付けて負の値に変換します。

<div class="snap-start -scroll-ml-6 ...">
  <!-- ... -->
</div>

論理プロパティの使用

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

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

左から右

右から左

<div dir="ltr">
  <div class="snap-x ...">
    <div class="snap-start scroll-ms-6 ...">
      <img src="/img/vacation-01.jpg"/>
    </div>
    <!-- ... -->
  </div>
</div>
<div dir="rtl">
  <div class="snap-x ...">
    <div class="snap-start scroll-ms-6 ...">
      <img src="/img/vacation-01.jpg"/>
    </div>
    <!-- ... -->
  </div>
</div>

より詳細な制御が必要な場合は、LTR および RTL 修飾子を使用して、現在のテキスト方向に応じて特定のスタイルを条件付きで適用することもできます。

カスタム値の使用

次のようなユーティリティを使用します scroll-ml-[<value>] や scroll-me-[<value>]を設定するにはスクロールマージン完全にカスタム値に基づいています

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

CSS変数については、scroll-ml scroll-ml-(<custom-property>) 構文も使用できます。

<div class="scroll-ml-(--my-scroll-margin) ...">
  <!-- ... -->
</div>

これは、次のショートハンドです。 scroll-ml-[var(<custom-property>)] var() 関数を自動的に追加します。

レスポンシブデザイン

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

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

バリアントのドキュメントで、バリアントの使用方法について詳しく学んでください。

テーマのカスタマイズ

次の scroll-m-<number>、scroll-mx-<number>、scroll-my-<number>、scroll-ms-<number>、scroll-me-<number>、scroll-mt-<number>、scroll-mr-<number>、scroll-mb-<number>、および scroll-ml-<number>ユーティリティは、--spacing テーマ変数によって駆動されます。これは、独自のテーマでカスタマイズできます。

@theme {
  --spacing: 1px; 
}

テーマ変数のドキュメントで、スペーシングスケールのカスタマイズについて詳しく学んでください。