Интерактивность
scroll-snap-stop
Утилиты для управления возможностью пропуска возможных позиций привязки.
| Class | Styles |
|---|---|
snap-normal | scroll-snap-stop: normal; |
snap-always | scroll-snap-stop: always; |
Примеры
Принудительная остановка на позициях привязки
Используйте утилиту snap-always вместе с утилитой snap-mandatory для принудительной остановки контейнера с привязкой на элементе перед тем, как пользователь сможет продолжить прокрутку к следующему элементу:
Прокрутите в сетке изображений, чтобы увидеть ожидаемое поведение
<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>Подробнее об использовании вариантов читайте в документации по вариантам.