Interactividad
scroll-snap-stop
Utilidades para controlar si puedes saltarte posibles posiciones de snap.
| Clase | Estilos |
|---|---|
snap-normal | scroll-snap-stop: normal; |
snap-always | scroll-snap-stop: always; |
Ejemplos
Forzar detenciones de posición de snap
Usa la utilidad snap-always junto con la utilidad snap-mandatory para forzar que un contenedor de snap siempre se detenga 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 detenciones de posición de snap
Usa la utilidad snap-normal para permitir que un contenedor de snap se salte posibles posiciones de snap del 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 Responsive
Prefija una utilidad scroll-snap-stop con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:
<div class="snap-always md:snap-normal ..."> <!-- ... --></div>Aprende más sobre el uso de variantes en la documentación de variantes.