Utilidades · Desplazamiento
Scroll (desplazamiento y anclaje)
Controla el desbordamiento, la animación del desplazamiento, los puntos de anclaje, los offsets y la propagación del scroll.
Comportamiento
.scroll-smooth anima los saltos; .scroll-auto conserva el comportamiento nativo.
Anclaje preciso
El contenedor define el eje y cada elemento decide si se alinea al inicio, centro o final.
Propagación controlada
.overscroll-x-contain evita que el gesto continúe desplazando el contenedor padre.
Código + resultado
Dos composiciones de scroll
Cada pestaña muestra una responsabilidad distinta. El HTML contiene todos los elementos que aparecen en el resultado aplicado.
<section>
<p>Arrastra la fila y suelta en cualquier posición.</p>
<div class="overflow-x-auto scroll-smooth snap-x scroll-p-16 overscroll-x-contain">
<article class="snap-start scroll-m-16"><strong>01</strong><small>Inicio</small></article>
<article class="snap-start scroll-m-16"><strong>02</strong><small>Inicio</small></article>
<article class="snap-start scroll-m-16"><strong>03</strong><small>Inicio</small></article>
<article class="snap-start scroll-m-16"><strong>04</strong><small>Inicio</small></article>
<article class="snap-start scroll-m-16"><strong>05</strong><small>Inicio</small></article>
<article class="snap-start scroll-m-16"><strong>06</strong><small>Inicio</small></article>
<article class="snap-start scroll-m-16"><strong>07</strong><small>Inicio</small></article>
<article class="snap-start scroll-m-16"><strong>08</strong><small>Inicio</small></article>
</div>
<footer>Siempre termina con una tarjeta alineada a la guía.</footer>
</section>Arrastra la fila y suelta en cualquier posición.
.snap-x obliga a terminar en un punto válido, aunque sueltes lejos. .snap-start alinea el borde inicial de la tarjeta con la guía azul.
<section>
<p>Arrastra la fila y suéltala cerca del centro.</p>
<div class="overflow-x-auto scroll-smooth snap-x-proximity scroll-p-32">
<article class="snap-center"><strong>01</strong><small>Punto de snap</small></article>
<article class="snap-center"><strong>02</strong><small>Punto de snap</small></article>
<article class="snap-center"><strong>03</strong><small>Punto de snap</small></article>
<article class="snap-center"><strong>04</strong><small>Punto de snap</small></article>
<article class="snap-center"><strong>05</strong><small>Punto de snap</small></article>
<article class="snap-center"><strong>06</strong><small>Punto de snap</small></article>
<article class="snap-center"><strong>07</strong><small>Punto de snap</small></article>
<article class="snap-center"><strong>08</strong><small>Punto de snap</small></article>
</div>
<footer>
<span>Lejos: conserva la posición</span>
<span>Cerca: centra la tarjeta</span>
</footer>
</section>Arrastra la fila y suéltala cerca del centro.
.scroll-smooth anima el recorrido. .snap-x-proximity decide si corrige la posición: sólo actúa cuando una tarjeta termina cerca de la guía central.
Mapa del sistema
Cuatro decisiones independientes
Compón únicamente las familias que el patrón necesita.
.scroll-smoothCómo se mueve
Define si el desplazamiento programático es suave o inmediato.
.snap-xDónde se detiene
Activa puntos de anclaje en el contenedor y define su eje.
.scroll-p-16Distancia del borde
Reserva un offset interno al llevar un punto de snap a posición.
.overscroll-x-containCómo se propaga
Evita encadenar el gesto horizontal con el contenedor padre.
Scroll snap
El contenedor define la regla; el hijo, la alineación
El snap necesita una clase en ambos niveles. Si falta una de las dos partes, no hay un punto completo de anclaje.
.snap-x.snap-y.snap-bothObligatorio
El navegador debe terminar en un punto de snap válido.
.snap-x-proximity.snap-y-proximity.snap-both-proximityPor proximidad
Se ajusta sólo cuando el recorrido termina cerca del punto.
.snap-start.snap-center.snap-endAlineación
Indica qué parte del elemento coincide con el área visible.
Offsets
Dos espacios con responsabilidades distintas
Ambas escalas usan píxeles. Cambia de pestaña para ver qué borde toma como referencia cada familia.
.scroll-p-{valor} mueve hacia dentro la línea donde deben alinearse los elementos.
.scroll-p-00px.scroll-p-88px.scroll-p-1616px.scroll-p-2424px.scroll-p-3232px.scroll-p-4848px.scroll-p-6464px.scroll-p-9696px.scroll-m-{valor} conserva una separación externa antes de alinear el elemento.
.scroll-m-00px.scroll-m-88px.scroll-m-1616px.scroll-m-2424px.scroll-m-3232px.scroll-m-4848px.scroll-m-6464px.scroll-m-9696px.scroll-mx-16 aplica margen horizontal y .scroll-my-16 aplica margen vertical.Referencia
Clases disponibles
Resumen de las familias reales cargadas por el framework.
| Clases | Propiedad | Valores | Qué hacen |
|---|---|---|---|
.scroll-auto / .scroll-smooth | scroll-behavior | auto / smooth | Controlan la animación del desplazamiento programático. |
.snap-x / .snap-y / .snap-both | scroll-snap-type | mandatory | Definen eje y ajuste obligatorio. |
.snap-*-proximity | scroll-snap-type | proximity | Ajustan sólo cerca de un punto. |
.snap-start / .snap-center / .snap-end | scroll-snap-align | start / center / end | Alinean cada elemento dentro del contenedor. |
.scroll-p-{valor} | scroll-padding | 0, 8, 16, 24, 32, 48, 64, 96px | Reserva espacio dentro del área visible. |
.scroll-m-{valor} | scroll-margin | 0, 8, 16, 24, 32, 48, 64, 96px | Añade separación alrededor del destino. |
.overscroll-{auto|contain|none} | overscroll-behavior | 3 valores | Controla la propagación al contenedor padre. |
.overscroll-x-* / .overscroll-y-* | overscroll por eje | auto / contain / none | Limita la regla a un eje. |
Recomendaciones
Buenas prácticas de scroll
Define el desbordamiento
Usa .overflow-x-auto o .overflow-y-auto en el contenedor antes de aplicar comportamiento o snap.
Respeta movimiento reducido
.scroll-smooth vuelve automáticamente a desplazamiento inmediato cuando el usuario activa prefers-reduced-motion.
Combina ambos niveles
Snap requiere una regla en el contenedor y una alineación en cada elemento destino.
Contén paneles anidados
Usa overscroll contain cuando el gesto no deba continuar desplazando la página exterior.