Интерактивность
scroll-snap-type
Утилиты для управления строгостью соблюдения точек привязки в контейнере с привязкой.
| Class | Styles |
|---|---|
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>Подробнее об использовании вариантов читайте в документации по вариантам.