インタラクティブ性
scroll-snap-stop
スナップ位置をスキップできるかどうかを制御するユーティリティ。
| クラス | スタイル |
|---|---|
snap-normal | scroll-snap-stop: normal; |
snap-always | scroll-snap-stop: always; |
例
スナップ位置での停止を強制する
ユーザーが次のアイテムまでスクロールするのを防ぎ、常に要素上でスナップコンテナを停止させるには、snap-mandatoryユーティリティとともにsnap-alwaysユーティリティを使用します。
画像のグリッドをスクロールして、期待される動作を確認してください。
スナップポイント
<div class="snap-x snap-mandatory ..."> <div class="snap-center snap-always ..."> <img src="/img/vacation-01.jpg" /> </div> <div class="snap-center snap-always ..."> <img src="/img/vacation-02.jpg" /> </div> <div class="snap-center snap-always ..."> <img src="/img/vacation-03.jpg" /> </div> <div class="snap-center snap-always ..."> <img src="/img/vacation-04.jpg" /> </div> <div class="snap-center snap-always ..."> <img src="/img/vacation-05.jpg" /> </div> <div class="snap-center snap-always ..."> <img src="/img/vacation-06.jpg" /> </div></div>スナップ位置での停止をスキップする
スナップコンテナがスクロールスナップ位置をスキップできるようにするには、snap-normalユーティリティを使用します。
画像のグリッドをスクロールして、期待される動作を確認してください。
スナップポイント
<div class="snap-x ..."> <div class="snap-center snap-normal ..."> <img src="/img/vacation-01.jpg" /> </div> <div class="snap-center snap-normal ..."> <img src="/img/vacation-02.jpg" /> </div> <div class="snap-center snap-normal ..."> <img src="/img/vacation-03.jpg" /> </div> <div class="snap-center snap-normal ..."> <img src="/img/vacation-04.jpg" /> </div> <div class="snap-center snap-normal ..."> <img src="/img/vacation-05.jpg" /> </div> <div class="snap-center snap-normal ..."> <img src="/img/vacation-06.jpg" /> </div></div>レスポンシブデザイン
プレフィックスa scroll-snap-stop ユーティリティ ユーティリティを適用するmd:のようなブレークポイントバリアントとともにmedium 以上の画面サイズ
<div class="snap-always md:snap-normal ..."> <!-- ... --></div>バリアントの使用方法の詳細については、バリアントドキュメントを参照してください。