Interactividad
scroll-snap-stop
Utilidades para controlar si puedes omitir o pasar de largo posibles posiciones de ajuste de scroll.
| Clase | Estilos |
|---|---|
snap-normal | scroll-snap-stop: normal; |
snap-always | scroll-snap-stop: always; |
Ejemplos
Forzar paradas en posiciones de ajuste
Utiliza la utilidad snap-always junto con la utilidad snap-mandatory para obligar a un contenedor snap a detenerse siempre en un elemento antes de que el usuario pueda continuar desplazándose al siguiente elemento:
Desplázate en la cuadrícula de imágenes para ver el comportamiento esperado
<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>Omitir paradas en posiciones de ajuste
Utiliza la utilidad snap-normal para permitir que un contenedor snap omita posibles posiciones de ajuste de scroll:
Desplázate en la cuadrícula de imágenes para ver el comportamiento esperado
<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>Diseño responsivo
Antepone a la utilidad scroll-snap-stop el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:
<div class="snap-always md:snap-normal ..."> <!-- ... --></div>Obtén más información sobre el uso de variantes en la documentación de variantes.