Scroll Horizontal con CSS desde Cero

Ahora que las has terminado de aplicar estilos a las tarjetas, debemos crear este scroll horizontal que se genera al navegar entre ellas.

Como desarrollador fronted vas a ocupar muchas veces frameworks para acelerar tu proceso de creación, como para crear este tipo de efectos. Sin embargo, para esta ocasión usaremos sólo código CSS con la intención de comprender cómo están construidos. ¡Vamos a nuestra hoja de estilos!

Primero, para que nuestro contenedor pueda generar el scroll entre las tarjetas estas deben tenerlo. Centramos todas las tarjetas para general un scroll con scroll-snap-align: center. Esta línea la colocamos justo debajo del position: relative del contenedor de nuestra tarjeta.

.plans-container--card {
    position: relative;
    scroll-snap-align: center;
    ...
}

Cómo hacer un scroll

• Llamamos la clase del contenedor de las tarjetas con .plans-container--slider.
• display: flex ya nos genera un scroll horizontal, pero se desborda del contenedor y se genera un overflow por fuera.
• Le damos una altura de 316px, mayor al contenedor de las tarjetas.
• Generamos un scroll sobre el eje x con overflow-x: scrol. Esta propiedad establece lo que se muestra cuando el contenido desborda los bordes izquierdo y derecho de un elemento a nivel de bloque. Puede que no sea nada, una barra de desplazamiento o el contenido adicional.
• overscroll-behabior establece lo que hace un navegador cuando alcanza el límite de un área de desplazamiento.
• Para que al deslizarnos sobre las tarjetas la vista se centre en el centro de cada una de ellas como si tuviesen un iman, usamos scroll-snap-type: x proximity.

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

En el navegador podemos observar que las tarjetas están pegadas una a otra. En CSS hay una nueva propiedad llamada gap que nos ayuda a resolver este problema.

Actualmente gap es soportado por casi todos los navegadores, sin embargo, para usar una propiedad nueva, debemos al menos confirmar que tenga un 95% de disponibilidad para evitar que los usuarios tengan una mala experiencia.

Puedes consultar en la página Can I Use, entre otras cosas, la cantidad de navegadores en que una propiedad está disponible. En este caso para solucionarlo vamos al contenedor de las tarjetas y buscamos la propiedad de margin.

.plans-container--card {
    ...
    margin: 50px auto 0;
    ...
 }

Cambiamos el atributo auto por 15px.

.plans-container--card {
    ...
    margin: 50px 15px 0;
    ...
 }

Y ya tendríamos este resultado:

Y así hemos terminado esta última sección de planes por completo. Quizás te preguntes por los íconos de navegación a los costados. Por supuesto que aún se puede hacer más usando Javascript y añadiendo interacciones al hacer clic, pero eso te lo dejamos a ti. Ya sabes construir un scroll usando únicamente CSS, eso es bastante genial.

Contribución creada por: José Miguel Veintimilla (Platzi Contributor), con aportes de John Steven Bernal Gonzalez.