Interactividad
scroll-snap-align
Utilidades para controlar la alineación del punto de ajuste de scroll (scroll snap) de un elemento.
| Clase | Estilos |
|---|---|
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; |
Ejemplos
Ajustar al centro
Utiliza la utilidad snap-center para ajustar un elemento a su centro al desplazarse dentro de un contenedor snap:
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>Ajustar al inicio
Utiliza la utilidad snap-start para ajustar un elemento a su inicio al desplazarse dentro de un contenedor snap:
Desplázate en la cuadrícula de imágenes para ver el comportamiento esperado
<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>Ajustar al final
Utiliza la utilidad snap-end para ajustar un elemento a su final al desplazarse dentro de un contenedor snap:
Desplázate en la cuadrícula de imágenes para ver el comportamiento esperado
<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>Diseño responsivo
Antepone a la utilidad scroll-snap-align 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-center md:snap-start ..."> <!-- ... --></div>Obtén más información sobre el uso de variantes en la documentación de variantes.