Interactividad
scroll-snap-type
Utilidades para controlar con qué rigidez se aplican los puntos de ajuste (snap points) en un contenedor snap.
| Clase | Estilos |
|---|---|
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; |
Ejemplos
Ajuste de scroll horizontal
Utiliza la utilidad snap-x para habilitar el ajuste de scroll horizontal dentro de un elemento:
Desplázate en la cuadrícula de imágenes para ver el comportamiento esperado
<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>Para que el ajuste de scroll funcione, también debes establecer la alineación del ajuste de scroll en los elementos hijos.
Ajuste de scroll obligatorio (mandatory)
Utiliza la utilidad snap-mandatory para obligar a un contenedor snap a detenerse siempre en un punto de ajuste:
Desplázate en la cuadrícula de imágenes para ver el comportamiento esperado
<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>Ajuste de scroll por proximidad
Utiliza la utilidad snap-proximity para hacer que un contenedor snap se detenga en los puntos de ajuste cercanos por proximidad:
Desplázate en la cuadrícula de imágenes para ver el comportamiento esperado
<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>Diseño responsivo
Antepone a la utilidad scroll-snap-type 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-none md:snap-x ..."> <!-- ... --></div>Obtén más información sobre el uso de variantes en la documentación de variantes.