Muchas veces cuando estamos realizando el diseño de una web tenemos que apilar de manera horizontal recursos o contenedores y que estos los podemos desplazar de izquierda a derecha o de derecha a izquierda; aunque no solo tienen que ser contenedores, puede ser que quieras que tu web sea de forma horizontal, un sitio o web horizontal.
La web es, por naturaleza, vertical. Sin embargo, hay muchos escenarios reales donde apilar contenido de forma horizontal y permitir un desplazamiento lateral tiene todo el sentido: galerías, listas de productos, cards, planes de precios o incluso sitios completos con navegación horizontal.
En mi caso, el scrolling horizontal con CSS es algo que he implementado varias veces en proyectos reales. Aunque suele parecer algo trivial, la realidad es que no basta con una sola propiedad CSS para que funcione bien, sea usable y no se rompa en distintos dispositivos.
En esta guía te voy a enseñar cómo crear un scroll horizontal correctamente usando solo CSS, cuándo usar cada técnica y qué errores evitar.
Qué es el scrolling horizontal y cuándo usarlo
El scrolling horizontal es una técnica que permite al usuario desplazarse de izquierda a derecha dentro de un contenedor, en lugar del clásico scroll vertical.
Scroll horizontal vs scroll vertical
- Scroll vertical: ideal para lectura larga y navegación tradicional.
- Scroll horizontal: perfecto para elementos visuales repetitivos, cards o contenido que se consume “en bloques”.
No se trata de reemplazar el scroll vertical, sino de usarlo estratégicamente.
Casos reales donde tiene sentido usarlo
Algunos escenarios donde suelo usarlo:
- Listas de tarjetas (cards)
- Carruseles sin dependencias de JS
- Galerías de imágenes
- Secciones mobile-first
- Planes de precios o comparativas
Cómo crear un scroll horizontal con CSS (método clásico)
Esta es la técnica más simple, estable y compatible. La he usado muchas veces porque funciona sin JavaScript y sin hacks raros.
Aunque parezca obvio, olvidar una de estas dos propiedades es uno de los errores más comunes.
En esta entrada veremos cómo crear un el scroll horizontal o lateral sobre un grupo de contenedores o div como el siguiente:
En realidad es bastante sencilla y NO necesitas JavaScript para que funcione o algún plugin "mágico" solo unos sencillos pasos que tiene que tener en mente; aunque tampoco es tan simple como definir una regla CSS en el que indicamos que nuestros contenedores se muestren de manera horizontal y por lo tanto se desplacen de manera horizontal, tenemos que hacer algunas cosas como las siguientes:
- Definir el largo (height) del contenedor padre.
- Indicar que no queremos scrolling vertical.
- Habilitar el scrolling horizontal.
Propiedades clave: overflow-x y overflow-y
Para realizar los dos últimos pasos nos basta con aplicar un par de reglas CSS y sus correspondientes valores:
overflow-x: auto;
overflow-y: hidden;- overflow-x: auto habilita el scroll horizontal solo cuando es necesario.
- overflow-y: hidden evita el scroll vertical no deseado.
Las líneas anteriores se explican solas; con overflow-y con el valor hidden indica que ocultemos todo el contenido que sobresalga de nuestro contenedor (si configuramos bien el CSS esto paso puede ser opcional); con overflow-x con el valor auto indicamos que queremos scroll horizontal solo cuando sea necesario.
CSS del contenedor padre para el scrolling horizontal
El siguiente CSS es el empleado para el contenedor padre que es el que realizará el desplazamiento horizontal; de una vez definimos el tamaño y el ancho de nuestro padre:
El contenedor padre: tamaño, altura y white-space
width: auto;
height: 50px;
padding: 10px;
white-space: nowrap;En general, solo establecimos en tamaño de nuestro contenedor padre y el espaciado o margen interno; con la propiedad white-space se emplea para especificar cómo manejar el espacio en blanco dentro del contenedor, con el valor nowrap indicamos que no hay saltos de líneas o pausas; es decir, se muestra todo el contenido dentro de una fila, y es el corazón de nuestro experimento del scrolling horizontal.
Otro punto importante es que estamos definiendo un alto del contenedor fijo que es de 50px y el ancho del contenedor lo definimos como auto entonces podrá crecer tanto como sea necesario.
Aquí está la clave del asunto:
- white-space: nowrap evita los saltos de línea.
- El ancho se adapta al contenido.
- La altura es fija para evitar desbordes extraños.
En mi experiencia, white-space: nowrap es el verdadero corazón del scroll horizontal clásico.
Los elementos hijos y por qué inline-block es importante
Ahora definimos el siguiente CSS para nuestros hijos el cual no requiere de mayor explicación; simplemente estamos creando pequeñas cajas:
.horizontal-scroll-contenedor div {
width: 100px;
height: 50px;
margin-right: 10px;
display: inline-block;
}Puntos importantes:
- display: inline-block mantiene todos los elementos en una sola fila.
- El tamaño de los hijos no debe superar la altura del padre.
- El margen crea separación visual.
Ejemplo práctico de scrolling horizontal con divs
Como punto importante, es que los hijos tengan el mismo tamaño o menor al del padre, el display: inline-block para mostrar el contenido en una línea, resto del código es opcional y puedes consultarlos en los enlaces de descarga; finalmente el HTML de nuestro experimento:
<div class="horizontal-scroll-contenedor">
<div>Contenedor 1</div>
<div>Contenedor 2</div>
<div>Contenedor 3</div>
<div>Contenedor 4</div>
<div>Contenedor 5</div>
<div>Contenedor 6</div>
<div>Contenedor 7</div>
<div>Contenedor 8</div>
<div>Contenedor 9</div>
<div>Contenedor 10</div>
<div>Contenedor 11</div>
<div>Contenedor 12</div>
<div>Contenedor 13</div>
<div>Contenedor 14</div>
<div>Contenedor 15</div>
<div>Contenedor 16</div>
<div>Contenedor 17</div>
<div>Contenedor 18</div>
<div>Contenedor 19</div>
<div>Contenedor 20</div>
</div>CSS completo en base a lo explicado:
.horizontal-scroll-contenedor {
width: auto;
height: 50px;
padding: 10px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
.horizontal-scroll-contenedor div {
width: 100px;
height: 50px;
margin-right: 10px;
display: inline-block;
}Y puedes ver el ejemplo a continuación:
Este patrón es sencillo, predecible y fácil de mantener, por eso sigo usándolo cuando no necesito efectos avanzados.
Scroll horizontal con Flexbox (la opción moderna)
Hoy en día, si tengo que elegir, flexbox suele ser mi primera opción.
Por qué flex simplifica el scroll horizontal
Flexbox elimina la necesidad de white-space y inline-block, haciendo el código más limpio.
.flex-container {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
}Y los elementos:
.flex-item {
flex: 0 0 auto;
}- flex-wrap: nowrap evita que los elementos salten de línea.
- flex: 0 0 auto mantiene el tamaño de cada item.
Cuándo elegir flex frente a inline-block
- Uso flexbox cuando:
- El layout es moderno.
- Necesito alineación vertical.
- Quiero código más legible.
- Uso inline-block cuando:
- Busco máxima compatibilidad.
- Es un proyecto muy simple.
- No quiero depender de flex.
Scroll snapping: efecto imán al desplazarse
Aquí entramos en un nivel más pro.
scroll-snap-type y scroll-snap-align
Estas propiedades crean el famoso efecto “imán”:
.slider {
display: flex;
overflow-x: scroll;
scroll-snap-type: x proximity;
}
.card {
scroll-snap-align: center;
}Esto es ideal para:
- Experiencias mobile-first
- Carruseles táctiles
- Secciones tipo “planes” o “features”
Lo he usado bastante en proyectos responsive porque mejora muchísimo la experiencia en móvil sin necesidad de JS.
Errores comunes al implementar scroll horizontal
- El scroll no aparece
- Falta overflow-x
- El contenido no desborda realmente
- El ancho del contenedor es incorrecto
- Los elementos se rompen en varias líneas
- Falta white-space: nowrap
- Falta flex-wrap: nowrap
- Problemas de altura y overflow
- Altura del contenedor mal definida
- Elementos hijos más grandes que el padre
- Estos errores son más comunes de lo que parece; me los he encontrado más de una vez.
¿Hace falta JavaScript para un scroll horizontal?
En la mayoría de los casos: no.
CSS es:
- Más rápido
- Más simple
- Más accesible
- Más mantenible
Preguntas frecuentes sobre scroll horizontal con CSS
- ¿Se puede hacer scroll horizontal solo con CSS?
- Sí, y en la mayoría de los casos es la mejor opción.
- ¿Flexbox o inline-block?
- Flexbox es más moderno y limpio; inline-block sigue siendo válido.
- ¿Funciona en móvil?
- Sí, especialmente bien con gestos táctiles y scroll-snap.
- ¿Afecta al SEO?
- No, siempre que el contenido sea accesible y visible.
Extra: desplazando de manera automática con JavaScript: .scrollLeft()
Aunque dijimos que no emplearíamos JavaScript para este experimento o tutorial de igual manera vamos a explicar un extra en la cual podemos potenciar el experimento anterior, simplemente vamos emplear la función .scrollLeft para movernos de manera horizontal, esto es perfecto si queremos que el scroll se mueva de manera automática; simplemente debemos de emplear .scrollLeft la cual recibe como parámetro una cantidad numérica la cual define la cantidad de pixeles que vamos a desplazarnos; es decir, para movernos 200 píxeles:
// Seleccionamos el contenedor
const contenedor = document.querySelector(".horizontal-scroll-contenedor");
// Asignamos el valor de desplazamiento
contenedor.scrollLeft = 200;En JavaScript moderno puedes usar el método .scrollTo() con un objeto de opciones para que el movimiento no sea un salto brusco, sino un deslizamiento fluido:
const contenedor = document.querySelector(".horizontal-scroll-contenedor");
contenedor.scrollTo({
left: 200,
behavior: 'smooth' // Esto hace que el scroll se vea animado
});Conclusión
El scrolling horizontal con CSS no solo es posible, sino recomendable cuando se hace bien. No necesitas librerías mágicas ni JavaScript pesado; solo entender cómo funcionan overflow, display y el modelo de layout.
Después de probar varias soluciones, mi recomendación es clara:
- Empieza simple.
- Usa flexbox si puedes.
- Añade scroll-snap solo cuando aporte valor real.
- Evita hacks innecesarios.