インタラクティビティー
scroll-snap-align
要素のスクロールスナップアラインメントを制御するためのユーティリティ。
| クラス | スタイル |
|---|---|
snap-start | scroll-snap-align: start; |
snap-end | scroll-snap-align: end; |
snap-center | scroll-snap-align: center; |
snap-align-none | scroll-snap-align: none; |
例
中央へのスナップ
snap-center ユーティリティを使用して、スナップコンテナ内でスクロールされるときに要素を中央にスナップします。
画像のグリッドをスクロールして、期待される動作を確認してください。
スナップポイント
<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-start ユーティリティを使用して、スナップコンテナ内でスクロールされるときに要素を開始位置にスナップします。
画像のグリッドをスクロールして、期待される動作を確認してください。
スナップポイント
<div class="snap-x ..."> <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 class="snap-start ..."> <img src="/img/vacation-06.jpg" /> </div></div>終了位置へのスナップ
snap-end ユーティリティを使用して、スナップコンテナ内でスクロールされるときに要素を終了位置にスナップします。
画像のグリッドをスクロールして、期待される動作を確認してください。
スナップポイント
<div class="snap-x ..."> <div class="snap-end ..."> <img src="/img/vacation-01.jpg" /> </div> <div class="snap-end ..."> <img src="/img/vacation-02.jpg" /> </div> <div class="snap-end ..."> <img src="/img/vacation-03.jpg" /> </div> <div class="snap-end ..."> <img src="/img/vacation-04.jpg" /> </div> <div class="snap-end ..."> <img src="/img/vacation-05.jpg" /> </div> <div class="snap-end ..."> <img src="/img/vacation-06.jpg" /> </div></div>レスポンシブデザイン
プレフィックスa scroll-snap-align ユーティリティ md: のようなブレークポイントバリアントとともに使用して、ユーティリティを適用するのはmedium 画面サイズ以上。
<div class="snap-center md:snap-start ..."> <!-- ... --></div>バリアントのドキュメントでバリアントの使用方法の詳細をご覧ください。