インタラクティブ性
scroll-snap-type
スナップコンテナ内でスナップポイントがどれだけ厳密に適用されるかを制御するためのユーティリティ。
| クラス | スタイル |
|---|---|
snap-none | scroll-snap-type: none; |
snap-x | scroll-snap-type: x var(--tw-scroll-snap-strictness); |
snap-y | scroll-snap-type: y var(--tw-scroll-snap-strictness); |
snap-both | scroll-snap-type: both var(--tw-scroll-snap-strictness); |
snap-mandatory | --tw-scroll-snap-strictness: mandatory; |
snap-proximity | --tw-scroll-snap-strictness: proximity; |
例
水平スクロールスナップ
snap-xユーティリティを使用して、要素内で水平スクロールスナップを有効にします
画像のグリッドをスクロールして、期待される動作を確認してください
スナップポイント
<div class="snap-x ..."> <div class="snap-center ..."> <img src="/img/vacation-01.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-02.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-03.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-04.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-05.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-06.jpg" /> </div></div>スクロールスナップを機能させるには、子要素にスクロールスナップアラインメントも設定する必要があります。
必須スクロールスナップ
snap-mandatoryユーティリティを使用して、スナップコンテナを常にスナップポイントで停止するように強制します
画像のグリッドをスクロールして、期待される動作を確認してください
スナップポイント
<div class="snap-x snap-mandatory ..."> <div class="snap-center ..."> <img src="/img/vacation-01.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-02.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-03.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-04.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-05.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-06.jpg" /> </div></div>近接スクロールスナップ
snap-proximityユーティリティを使用して、スナップコンテナを近接しているスナップポイントで停止するようにします
画像のグリッドをスクロールして、期待される動作を確認してください
スナップポイント
<div class="snap-x snap-proximity ..."> <div class="snap-center ..."> <img src="/img/vacation-01.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-02.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-03.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-04.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-05.jpg" /> </div></div>レスポンシブデザイン
プレフィックスa scroll-snap-typeユーティリティ md:のようなブレークポイントバリアントを使用して、ユーティリティを適用する範囲をmedium 以上の画面サイズ
<div class="snap-none md:snap-x ..."> <!-- ... --></div>バリアントの使用方法の詳細については、バリアントのドキュメントを参照してください。