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