CSS Scroll Snap: carruseles y secciones a pantalla completa
Guía de CSS Scroll Snap
CSS Scroll Snap: carruseles, secciones a pantalla completa y un playground en vivo
Prueba cada valor de scroll-snap-type, scroll-snap-align y scroll-snap-stop en un contenedor en vivo y luego copia un carrusel solo con CSS y secciones a pantalla completa que siguen siendo accesibles.
Scroll snap hace que una caja con scroll se detenga en los hijos que elijas en lugar de en cualquier punto. Pon scroll-snap-type: x mandatory (o y, o proximity) en el contenedor de scroll y luego scroll-snap-align: start, center o end en cada hijo. Añade scroll-padding para headers fijos y scroll-snap-stop: always para detenerte en cada elemento.
Propiedades de scroll snap de un vistazo
Propiedad
Se pone en
Valores
Contenedor de scroll
none, x, y, block, inline, both + mandatory o proximity
Cada hijo
none, start, center, end (uno o dos valores)
Cada hijo
normal (puede pasar de largo), always (debe detenerse)
Contenedor de scroll
Margen interior en longitud o porcentaje, como padding
Cada hijo
Margen exterior en longitud alrededor del área de snap
Antes, scroll snap necesitaba una librería de carruseles. Hoy, unas pocas líneas de CSS te dan tarjetas deslizables, una galería paginada o secciones a pantalla completa, con scroll con inercia y soporte de teclado gestionados por el navegador. Usa el playground para notar la diferencia entre cada valor antes de copiar código.
Elige un eje y un nivel de rigidez para el contenedor en el playground.
Elige cómo se alinea cada diapositiva y si el scroll debe detenerse en todas.
Haz scroll en la vista previa con un trackpad, la rueda del ratón, el dedo o las flechas tras hacer clic dentro.
Copia el CSS generado, o usa uno de los patrones completos que hay más abajo.
Cuando se indica un eje sin palabra clave de rigidez, se usa proximity.
Prefiere proximity para contenido largo: mandatory puede atrapar a los lectores cuando un hijo es más alto que el contenedor.
Haz que el contenedor de scroll pueda recibir el foco con tabindex="0" y un nombre accesible, para que quien usa el teclado pueda desplazarlo con las flechas.
El snap funciona con scrollIntoView() y con enlaces a anclas, así que unos simples botones de siguiente y anterior pueden controlar un carrusel.
Preguntas frecuentes
¿Qué diferencia hay entre mandatory y proximity?
Con mandatory, el contenedor siempre se asienta en una posición de snap cuando el scroll se detiene. Con proximity solo hace snap cuando el scroll termina cerca de una, lo que deja a la gente libre para leer entre medias. proximity es el valor por defecto cuando solo escribes el eje.
¿Por qué no funciona scroll snap?
Las causas habituales son: scroll-snap-type está en los hijos en lugar de en el padre con scroll, el padre no desborda realmente (pon overflow-x: auto y un tamaño fijo), o los hijos no tienen scroll-snap-align. Para el snap a nivel de página, el contenedor es html, no body.
¿Cómo evito que un header fijo tape las secciones con snap?
Pon scroll-padding-top en el contenedor de scroll con la altura del header, por ejemplo html { scroll-padding-top: 64px; }. Así las secciones con snap y los saltos a anclas se detienen debajo del header en lugar de quedar tapados por él.
¿Puedo crear un carrusel sin JavaScript?
Sí para deslizar y hacer scroll: una fila flex con overflow-x: auto y snap x mandatory es un carrusel que funciona. Los indicadores de puntos que muestran la diapositiva actual, la reproducción automática y el bucle siguen necesitando un poco de script.
¿CSS scroll snap tiene soporte en todas partes?
scroll-snap-type es Baseline ampliamente disponible desde 2022 en Chrome, Edge, Firefox y Safari, y scroll-snap-stop desde julio de 2022. Puedes usarlo sin alternativa; los navegadores que no lo soportan simplemente hacen scroll libre.
Carruseles que la gente puede usar de verdad
Deja que asome la siguiente tarjeta haciendo cada diapositiva más estrecha que el contenedor, por ejemplo flex: 0 0 85%. El borde visible indica que hay más para deslizar, algo que una diapositiva perfectamente ajustada no hace.
Dale al contenedor una etiqueta como aria-label="Customer photos" y mantén las diapositivas como una lista. No ocultes a los lectores de pantalla las diapositivas fuera de la vista, y nunca uses reproducción automática sin un control de pausa.
Secciones a pantalla completa sin trampas
El snap a altura completa queda espectacular en una demo y molesta a los lectores cuando una sección tiene más texto del que cabe en la pantalla, porque el snap mandatory los arrastra una y otra vez más allá. Usa proximity para las secciones de página, o asegúrate de que cada sección cabe de verdad en la pantalla de un móvil.
Respeta el movimiento reducido desactivando scroll-behavior: smooth dentro de una query prefers-reduced-motion: reduce. El snap en sí se puede mantener, ya que solo mueve lo que el lector pidió.
Carrusel de tarjetas solo con CSS
Carrusel horizontal con la siguiente tarjeta asomando
Desliza, haz scroll lateral o haz clic dentro y usa las flechas. Cada tarjeta ocupa el 80 por ciento del ancho, así que la siguiente se ve en el borde.
Secciones a pantalla completa
Secciones verticales que hacen snap bajo un header fijo
El snap está en html, el contenedor de scroll de la página. scroll-padding-top mantiene las secciones libres de un header de 64px, y proximity evita atrapar las secciones largas.
Botones de siguiente y anterior
Controlar el carrusel con scrollBy
El navegador termina el movimiento en el punto de snap más cercano, así que desplazarse el ancho de una tarjeta deja justo en la siguiente.
Playground de scroll snap
Eje
Rigidez
Alineación de la diapositiva
Detenerse en cada diapositiva
Vista previa de scroll snap, haz scroll o usa las flechas