Interactividad
scroll-snap-align
Utilidades para controlar la alineación del snap del scroll 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
Usa la utilidad snap-center para ajustar un elemento a su centro cuando se desplaza 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
Usa la utilidad snap-start para ajustar un elemento a su inicio cuando se desplaza 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
Usa la utilidad snap-end para ajustar un elemento a su final cuando se desplaza 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 Responsive
Prefija una utilidad scroll-snap-align con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:
<div class="snap-center md:snap-start ..."> <!-- ... --></div>Aprende más sobre el uso de variantes en la documentación de variantes.