Scroll horizontal con CSS

Curso de Responsive Design: Maquetación Mobile First

Bienvenida al curso

Por qué aprender Responsive Design con Mobile First

Setup inicial

Analizando el diseño: proyecto del curso

El valor de Mobile First

Arquitectura inicial

Assets de nuestro proyecto

Fuentes de nuestro proyecto

Estilos base

Sección de Header

Maquetación del header

Implementando BEM

Uso de linear-gradient

Uso de position para botón flotante

Sección de Intercambios

Estructura base de la sección de intercambio

Imagen de background

Estructura de tabla de monedas

Estilos base de tabla de monedas

Detallando estilos de tabla de monedas

Finalizando estilos de tabla de monedas

Sección de Beneficios

Estructura base de la sección de beneficios

Estilos de la sección de beneficios

Maquetando tarjetas de beneficios

Sección de Planes

Maquetando sección comodín

Estructura de sección de planes

Aplicando estilos a sección de planes

Aplicando estilos a las tarjetas de la sección de planes

Detallando estilos en tarjetas de planes

Aplicando estilos al botón de call to action

Scroll horizontal con CSS

Sección de Footer

Footer

Media Queries

Aplicando media queries

Lighthouse

Análisis con Lighthouse

Próximos pasos

Cierre y próximos pasos

Comparte tu proyecto y certifícate

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

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:
image(229).png

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.

Aportes 127

Preguntas 32

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

John Steven Bernal Gonzalez

hace 4 años

overflow-x

La propiedad de CSS overflow-x 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-behavior

la propiedad de css overscroll-behabior establece lo que hace un navegador cuando alcanza el límite de un área de desplazamiento. Es una abreviatura de overscroll-behavior-x y overscroll-behavior-y.

scroll-snap-type

La propiedad CSS scroll-snap-type establece qué tan estrictamente se aplican los puntos de snap en el contenedor de desplazamiento en caso de que haya uno

Amaury Soto Garay

hace 4 años

Con el siguiente código pueden decorar mejor el scrollbar 😃

.planes-container--slider::-webkit-scrollbar {
  background-color: var(--soft-orange);
  height: 3px;
}
.planes-container--slider::-webkit-scrollbar-thumb {
  background-color: var(--bitcoin-orange);
}

Paula Uzcategui Leon

hace 4 años

Bueno después de HORAS investigando y cientos de paginas de stack-overflow** he conseguido el scroll con flechitas que quería. ** Este scroll con flechitas es mi bebe así que mírenlo con amor.

Aqui esta un gif del resultado:
https://i.imgur.com/tnxPZBX.gif

Código en JS

/* Codigo para hacer scroll a un div horizontal por medio de flechas.
Uso el tamaño de las cajas dentro del slide para restarselo al scrollLeft y llevarme
a la posicion deseada.
Además oculto las flechas dependiendo de en que posicion me encuentre*/

//obtengo los dos elementos de flecha
var gray_arrow_left = document.getElementById("left-gray-arrow");
var gray_arrow_right = document.getElementById("right-gray-arrow");

//el contenedor de los planes aka donde se hace scroll
var plans_container = document.getElementById("plans-slider");
//las tarjetas de planes porque necesito saber su tamaño, y este puede variar
var plans_card = document.getElementsByClassName("plans-container--card");
//averiguo el tamaño de las tarjetas, esta es la posicion central donde deberia emepezar
var size = plans_card[1].clientWidth;

//Para que la cajita del centro se muestre por default
plans_container.scrollLeft = size;

gray_arrow_left.addEventListener("click", function(){
    gray_arrow_right.style.display = "inline-block";
    //Le resto el tamaño de las tarjetas  a la posicion del scroll para mover a la izquierda
    plans_container.scrollLeft -= size;
    //Si se encuentra en la primera tarjeta deberia esconder la flecha izquierda,
    // pues porque ya no puede seguir llendo a la izquierda :P
    if(plans_container.scrollLeft <= size*2){
        gray_arrow_left.style.display = "none";
    }
});

gray_arrow_right.addEventListener("click", function(){
    gray_arrow_left.style.display = "inline-block";
    plans_container.scrollLeft += size;
    if(plans_container.scrollLeft >= size){
        gray_arrow_right.style.display = "none";
    }
});

Estilos de las flechitas
Primero agregue un div en el html para envolver toodo el slide, y ahi es que voy a poner las flechas, porque si las pongo dentro del elemento que hace scroll ellas hacian scroll con el elemento y yo no quería eso.

     <div class= "slider-container">
             <span id="left-gray-arrow" class="arrow"></span></a>
                <span id="right-gray-arrow" class="arrow"></span>
		.
		el section con scroll va aqui
		.

Y en css

.slider-container{
    width: 100%;
    position: relative;
}
.slider-container .arrow{
    position: absolute;
    bottom: calc(50% - 20px);
    z-index: 1;
    display: inline-block;
    background-repeat: no-repeat;
    width: 12px;
    height: 12px;
}
.slider-container #left-gray-arrow{
    left: calc(100% - 80%);
    background-image: url(./assets/icons/arrow-gray-left.svg);
}
.slider-container #right-gray-arrow{
    right:  calc(100% - 80%);
    background-image: url(./assets/icons/arrow-gray-right.svg);
}

Ahora yo quería que cuando pasara a cada una de las cajitas de planes, esta me quedara en el centro bien bonita. Y esto lo podría hacer en teoría, agregando un padding a los lados del elemento scroll. PERO NO porque resulta que el padding-right no se aplica a el scroll horizontal
La solución que me inventé fue** crear un elemento con visibility: hidden del ancho que yo quería que tuvera el padding** y asi engañar a el navegador que me quería hacer la vida dificil

     <article class="plans-container--card" id="dummy"></article>

Aproveché la clase de mis otras cajitas de planes para que tengan los mismo estilos y que no me salga ninguna sorpresita por un margin o cualquier cosa rara

#dummy{
    min-width: calc(100% - 70%);
    visibility: hidden;
}

Y ahí esta! Seguro hay alguna otra solución mejor. Cualquier aporte es super bien recibido!
😃

Gore

hace 4 años

Y yo que pensaba que necesitariamos javascript para el slide 😛

Esteban Santiago Pizzani

Si ya tienes una cuenta,

Curso de Responsive Design: Maquetación Mobile First

Scroll horizontal con CSS

Cómo hacer un scroll

Gap 2023 al 93%

CSS para darle Scroll horizontal a la sección Monedas y Comisión

Método alternativo del scroll de los planes con flechas (solo con HTML y CSS)

Ver resultado

HTML

CSS

HTML

CSS