Generador de scroll-snap

Funciones

• Cuatro ejes: horizontal, vertical, ambos y el eje de bloque
• Tres alineaciones: inicio, centro y final
• ⚠️ La diferencia entre `proximity` y `mandatory` se detalla, incluido lo que `mandatory` le hace al contenido largo
• ⚠️ Avisa de que hacen falta las dos propiedades: `scroll-snap-type` en el contenedor y `scroll-snap-align` en los elementos, y con la mitad no hay ningún error
• La vista previa en vivo se puede arrastrar directamente
• Un contenedor vertical recibe una altura automática (sin ella no se puede desplazar)
• Copia el bloque del contenedor y el de los elementos por separado, listos para renombrar

Cómo se usa

1. Elige el eje y la alineación
2. Arrastra el bloque de abajo para ver el ajuste
3. Copia el código y aplica los dos bloques a tu propia estructura

Preguntas frecuentes

¿Por qué no hace nada mi scroll-snap-type?

Lo más probable es que falte la otra mitad. El ajuste necesita el contenedor y los elementos a la vez: `scroll-snap-type` en el contenedor que se desplaza y `scroll-snap-align` en cada elemento que deba ajustarse. Con solo la mitad del contenedor, el desplazamiento funciona perfectamente: es simplemente un desplazamiento normal. Eso es lo que lo hace difícil de rastrear: no hay error, las dos propiedades están bien escritas por separado y el síntoma es que no pasa nada. La otra causa habitual es que el contenedor no tenga nada que desplazar: el contenido es más corto que el contenedor, o el contenedor no tiene tamaño, y en ese caso no hay nada que ajustar.

¿Uso mandatory o proximity?

Por defecto, `proximity`. `mandatory` promete «siempre se detiene en un punto de ajuste», lo que suena mejor, pero cuando el contenido es más largo que el contenedor el navegador fuerza el retorno: desplazarte hasta la mitad y soltar te devuelve, y el contenido intermedio queda inalcanzable. Nada en pantalla avisa al usuario de que hay más. Quien navegue con teclado también salta elemento a elemento. `mandatory` solo es seguro y mejor cuando cada pantalla es exactamente un elemento de ajuste: el carrusel clásico en el que cada tarjeta llena la vista.

¿Por qué el ajuste vertical necesita una altura explícita?

Porque un bloque sin restricción de altura no se desplaza: su altura la marca el contenido, así que siempre es igual a la del contenido y no sobra nada que desplazar. En horizontal pasa lo mismo en esencia (sin anchura no deja de crecer hacia la derecha). Por eso el ajuste vertical casi siempre necesita un `height` (o un `max-height`), y por eso es más fácil equivocarse con él que con el horizontal: un contenedor de desplazamiento horizontal queda limitado de forma natural por el flujo normal del documento, y uno vertical no.

¿Afecta el ajuste de desplazamiento al teclado y a los lectores de pantalla?

Sí, y con `mandatory` más. Cuando alguien navega con teclado y pulsa `PageDown` o una flecha, el ajuste forzado le hace saltarse punto tras punto, sin poder leer el contenido intermedio. Los lectores de pantalla leen el contenido en orden del DOM y no les afecta el ajuste (que es visual), pero que el orden visual y el leído no coincidan ya desconcierta de por sí. La especificación ofrece `scroll-snap-stop: always` (detenerse obligatoriamente en cada punto) como remedio parcial, pero lo sensato con contenido largo es cambiar a `proximity`. El CSS no puede tomar esa decisión por ti.

¿Un carrusel debe usar ajuste de desplazamiento o JavaScript?

Mejor el ajuste de desplazamiento. Da gratis varias cosas que las versiones en JavaScript suelen hacer mal: la inercia nativa de los paneles táctiles y las pantallas táctiles, el desplazamiento con las flechas, una barra de desplazamiento y que «el botón de atrás vuelva a la posición anterior». Y sin script no puede fallar porque un script no cargue. Merece la pena añadir JavaScript solo para algo extra: reproducción automática, bucle infinito, sincronizar un indicador con la página actual o actuar al terminar un ajuste. Incluso entonces, parte del ajuste de desplazamiento y lee su estado desde el script, en vez de reescribir el desplazamiento a mano.