Capacidad C26 · Nivel 3

Scroll horizontal por secciones

Bajas con la rueda y el contenido avanza en horizontal. El mecanismo es el mismo avance() de C25 — lo que cambia es qué conduce ese 0 → 1.

Los cuatro niveles

Una web no tiene un nivel: lo tiene cada sección

Por eso el catálogo no describe webs, describe capacidades. Sigue bajando y las verás pasar.

Premium limpio

Tipografía, espacio y contención. Sin librerías y sin efectos de scroll: todo lo que aporta el nivel son decisiones de diseño.

Para quién: despachos, consultoras, clínicas. Donde la sobriedad es el argumento y cualquier efecto restaría.

21 KB · cero peticiones externas

Premium + movimiento

La misma contención, más movimiento nativo: el contenido aparece al alcanzarlo, con duraciones y curvas de un sistema documentado.

Para quién: el nivel por defecto. Casi todo cliente acaba aquí, porque da la sensación de cuidado sin pagar el precio del Nivel 3.

23,9 KB · el 71 % es una librería opcional

Experiencial

El scroll conduce la página: secciones que se quedan quietas, galerías con inercia, un hero pintado fotograma a fotograma.

Para quién: portfolios y marcas visuales. Y siempre sección a sección — una web entera en Nivel 3 es una web que cansa.

13–20 KB por componente · sin dependencias

Experimental

WebGL completo. El nivel que todo el mundo captura y casi nadie necesita — y que sin una reserva semántica deja a Google sin nada que leer.

Para quién: solo con un proyecto pagado detrás. Nunca de escaparate: cuesta más de mantener que de construir.

150 KB+ antes de tu contenido
Qué tienes que mirar

Cuatro cosas

  1. Baja con la rueda. Las tarjetas avanzan en horizontal, y el indicador de abajo dice por dónde vas.
  2. Pincha en la fila y usa las flechas del teclado. Funciona — porque se mueve el scroll real, no un transform.
  3. Sigue bajando hasta el final. La sección te suelta y la página continúa: no te quedas atrapado, y la última tarjeta llega justo al final del recorrido.
  4. Estrecha la ventana. Por debajo de 820 px deja de secuestrar el scroll y se convierte en un carrusel normal.

Por qué scrollLeft y no transform

  • Con transform hay que reimplementar el teclado, la rueda, el táctil y la barra de scroll. Cuatro cosas que ya existían.
  • Con scrollLeft vienen dadas, y un lector de pantalla ve una lista normal.
  • Y la degradación no hay que diseñarla: sin JavaScript esto sigue siendo una fila que se recorre.
Es la misma decisión de C22, tomada por el mismo motivo. Cuando dos capacidades convergen en la misma solución, deja de ser una preferencia y pasa a ser una regla del sistema.
Y la altura de la sección se calcula, no se fija. La primera versión llevaba height:400vh a pelo: en una pantalla de 1920 px la fila cabía entera y quedaban 3.060 px de scroll que no movían nada. La barra avanzaba igual. Ahora la altura es una pantalla + exactamente lo que haya que recorrer.

La condición, y no es opcional

El scroll horizontal secuestra el gesto natural del visitante. Solo se sostiene si el contenido es una secuencia — un proceso, una cronología, unos niveles — y si hay una salida evidente.
  • Indicador de posición siempre. Sin él, desorienta.
  • Salida clara: al llegar al final, la página sigue bajando con normalidad.
  • En móvil se apaga. Ahí el gesto horizontal ya existe y secuestrarlo es peor.