Cómo implementar un scroll horizontal con CSS

¿Alguna vez te has encontrado con la necesidad de crear un scroll horizontal en tu sitio web? Es más común de lo que piensas, especialmente cuando trabajas con galerías de imágenes, listas de productos o cualquier otro contenido que se beneficie de una navegación lateral. Hoy, te mostraremos cómo implementar un scroll horizontal usando solo CSS. ¡Así que empecemos!

¿Qué es un scroll horizontal?

Es importante que entiendas primero el concepto de lo que vas a crear. Un scroll horizontal es una técnica que le permite a los usuarios de un sitio web desplazarse de izquierda a derecha dentro de un contenedor, en lugar de hacerlo de arriba a abajo. Aunque suene muy simple, esto es especialmente útil cuando tienes mucho contenido en un espacio horizontal limitado.

Paso a paso para crear un scroll horizontal con CSS

1. Preparar el contenedor

Ahora sí, vamos a empezar con el tutorial. Primero, necesitamos un contenedor que aloje los elementos que deseamos desplazar horizontalmente. Para este ejemplo, usaremos una clase llamada .plans-container–slider.

.plans-container--slider {
    display: flex;
    height: 316px;
    overflow-x: scroll;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
}

Explicación de las propiedades

• display: flex; Esto convierte al contenedor en un flexbox, permitiendo la disposición en fila de sus hijos.
• height: 316px; Establece una altura específica para el contenedor.
• overflow-x: scroll; Habilita el scroll horizontal cuando el contenido desborda el contenedor.
• overscroll-behavior-x: contain; Controla el comportamiento de desplazamiento al llegar al límite del contenedor.
• scroll-snap-type: x proximity; Ayuda a centrar los elementos al desplazarse, como si tuvieran un imán.

2. Estilizar los elementos internos

Lo que haremos ahora será darle estilo a los elementos internos para que el scroll horizontal sea efectivo. Para ello usaremos una clase llamada .plans-container–card.

.plans-container--card {
    position: relative;
    scroll-snap-align: center;
    margin: 50px 15px 0;
}

Explicación de las propiedades

• position: relative; Es necesario para el correcto posicionamiento del elemento.
• scroll-snap-align: center; Alinea cada tarjeta en el centro del contenedor al hacer scroll.
• margin: 50px 15px 0; Añade margen alrededor de las tarjetas para que no se vean pegadas entre sí.

3. Agregar espacio entre los elementos

Para evitar que las tarjetas estén pegadas entre sí, utilizamos la propiedad gap.

.plans-container--slider {
    display: flex;
    height: 316px;
    overflow-x: scroll;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    gap: 15px;
}

Código completo de CSS

Aquí tienes el código CSS completo para implementar un scroll horizontal:

.plans-container--slider {
    display: flex;
    height: 316px;
    overflow-x: scroll;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    gap: 15px;
}

.plans-container--card {
    position: relative;
    scroll-snap-align: center;
    margin: 50px 15px 0;
}

¿Cómo funciona?

Al configurar el contenedor con display: flex, los elementos hijos se disponen en una fila. Luego, con overflow-x: scroll, permitimos el desplazamiento horizontal cuando el contenido excede el ancho del contenedor. La propiedad scroll-snap-type: x proximity asegura que los elementos se alineen en el centro del contenedor al hacer scroll.

Ahora que has aprendido cómo crear un scroll horizontal, te animamos a que lo realices en tu propio proyecto. Recuerda ajustar los tamaños y márgenes de acuerdo con tus necesidades.

Beneficios del scroll horizontal con CSS

1. Simplicidad: No necesitas JavaScript para implementar un scroll horizontal básico.
2. Rendimiento: CSS es más rápido y eficiente que manipular el DOM con JavaScript.
3. Accesibilidad: Los usuarios pueden navegar fácilmente con gestos táctiles o el uso del trackpad.

Ejemplo práctico: Galería de imágenes

Te daremos un ejemplo práctico para que complementes tu aprendizaje. Imagina que estás creando una galería de imágenes para un portafolio. Aquí tienes un ejemplo de cómo puedes aplicar el scroll horizontal:

<div class="plans-container--slider">
    <div class="plans-container--card">
        <img src="image1.jpg" alt="Imagen 1">
    </div>
    <div class="plans-container--card">
        <img src="image2.jpg" alt="Imagen 2">
    </div>
    <div class="plans-container--card">
        <img src="image3.jpg" alt="Imagen 3">
    </div>
    <!-- Más tarjetas aquí -->
</div>

Ya sabes que implementar un scroll horizontal con CSS es una técnica poderosa y sencilla que puede mejorar significativamente la experiencia de usuario en tu sitio web. Con solo unas pocas líneas de código, puedes hacer que tu contenido sea más accesible y fácil de navegar.

Si te ha gustado este tutorial y quieres aprender más sobre desarrollo web, no dudes en unirte a nuestro Bootcamp de Desarrollo Web Full Stack en KeepCoding. En poco tiempo, podrás dominar las técnicas más avanzadas y entrar al sector IT con un alto nivel de competencia. El sector tecnológico no solo ofrece estabilidad laboral y salarios altos, sino también la oportunidad de cambiar tu vida profesional por completo. ¡Inscríbete ahora y comienza tu transformación con KeepCoding!