Vamos a programar en este articulo dos botones para hacer scroll horizontal con html, css y unas pocas líneas de JavaScript.
Vas a poder encontrar el código explicado paso a paso y te va a quedar disponible para que lo puedas copiar y probar en tu propio proyecto.
Antes de arrancar te dejo también disponible este tutorial en vídeo.
Creando botones para hacer scroll horizontal con html - css y Javascript - YouTube
este video creamos de forma muy simple dos botones que sirven para mover cards de forma horizontal utilizado HTML - CSS y apenas un poquito de javascript.Art...
youtube.com
No olvides suscribirte a mi canal, subo contenido regularmente! ahora si , comenzamos con el código.
1 - Comenzamos creando la maquetación HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>Document</title>
</head>
<body>
<div class="scrolling-buttons-container">
<span id="scrolling-button-left">👈</span>
<span id="scrolling-button-right">👉</span>
</div>
<div class="scrolling-container">
<div class="scrolling-card"><h2>Soy una card Feliz</h2></div>
<div class="scrolling-card"><h2>Soy una card Feliz</h2></div>
<div class="scrolling-card"><h2>Soy una card Feliz</h2></div>
<div class="scrolling-card"><h2>Soy una card Feliz</h2></div>
<div class="scrolling-card"><h2>Soy una card Feliz</h2></div>
<div class="scrolling-card"><h2>Soy una card Feliz</h2></div>
<div class="scrolling-card"><h2>Soy una card Feliz</h2></div>
<div class="scrolling-card"><h2>Soy una card Feliz</h2></div>
<div class="scrolling-card"><h2>Soy una card Feliz</h2></div>
<div class="scrolling-card"><h2>Soy una card Feliz</h2></div>
<div class="scrolling-card"><h2>Soy una card Feliz</h2></div>
<div class="scrolling-card"><h2>Soy una card Feliz</h2></div>
<div class="scrolling-card"><h2>Soy una card Feliz</h2></div>
<div class="scrolling-card"><h2>Soy una card Feliz</h2></div>
<div class="scrolling-card"><h2>Soy una card Feliz</h2></div>
<div class="scrolling-card"><h2>Soy una card Feliz</h2></div>
<div class="scrolling-card"><h2>Soy una card Feliz</h2></div>
<div class="scrolling-card"><h2>Soy una card Feliz</h2></div>
</div>
<script src="app.js"></script>
</body>
</html>
A - Primero, dentro de un contenedor tenemos nuestros dos botones, en mi caso son unas etiquetas span que me simulan un botón y que dentro contienen un emoji. En tu caso, podrías utilizar botones o lo que se ajuste a tu proyecto, lo importante es que les pongas un ID para poder identificarlo.
B - Por ultimo, dentro de un segundo contenedor, ponemos todas nuestras cards, cada una de ellas debe compartir una clase css.
2 - Aplicamos los estilos CSS.
.scrolling-container {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
scroll-behavior: smooth;
}
.scrolling-card {
flex: 0 0 auto;
border: solid 1px black;
margin: 10px;
width: 250px;
height: 150px;
text-align: center;
}
.scrolling-container::-webkit-scrollbar {
display: none;
}
.scrolling-buttons-container {
display: flex;
justify-content: space-between;
font-size: 25px;
margin-left: 25px;
margin-right: 25px;
}
A - Scrolling-container: Es el primer contenedor en el que se ordena la distribución de todas las cards a las cuales les vamos a dar la posibilidad de desplazarse de izquierda a derecha.
Utilizamos flexbox para lograr mostrar todas las cards en una misma fila. Además, le pasamos un comportamiento de scroll tipo smooth para generar mas suavidad en el desplazamiento de las cards.
B - Scrolling-card: Esta clase corresponde a cada card en particular, a las cuales alineamos con flexbox y les damos un estilo de aspecto y posicionamiento dentro de la web.
C - Scrolling-container::-webkit-scrollbar: En esta parte simplemente le decimos a la clase scrolling-container que queremos que nos elimine la barra de scroll horizontal que se muestra por defecto. Esta barra no se ve agradable en el diseño y la funcionalidad de desplazamiento la tendrán los botones.
D - Scrolling-buttons-container: Esta clase corresponde al contenedor de los botones en donde les damos un tamaño y un posicionamiento en la web.
3 - Funcionalidad de los botones con JavasCript.
const rightBtn = document.querySelector("#scrolling-button-right");
const leftBtn = document.querySelector("#scrolling-button-left");
const content = document.querySelector(".scrolling-container");
rightBtn.addEventListener("click", () => {
content.scrollLeft += 800;
});
leftBtn.addEventListener("click", () => {
content.scrollLeft -= 800;
});
A) Primero atrapamos el ID de ambos botones y la clase contenedora de todas las cards guardando esos valores dentro de unas constantes. Una vez hecho esto, ya estamos en condiciones de armar la funcionalidad.
B) Llega el momento de utilizar la propiedad scrollLeft para lograr la funcionalidad de desplazar a la derecha o a la izquierda el contenido. Se que es confuso, pero no hay una propiedad que se llame scrollRight. Simplemente con scrollLeft vamos a poder mover el contenido para ambos lados de las siguiente manera:
Para mover el contenido a la derecha le pasamos el escuchador de eventos al botón indicado y le pedimos que mueva el content (el contenedor de cards) hacia la derecha los pixeles que queramos utilizando scrollLeft con (+=) Es importante resaltar el +.
Para mover el contenido a la izquierda utilizamos exactamente la misma lógica pero esta vez utilizando el scrollLeft con signo (-=) Utilizamos el negativo para desplazar el contenido en sentido opuesto.
Eso es todo lo necesario para lograr el comportamiento de scroll horizontal utilizado botones.
Espero que te sirva y que la pases muy bien!
Saludos,
Pablo.
Top comments (2)
Hola Pablo, si quiero usar este codigo en una misma pagina, me veo con el problema que el script solo se enlaza a aun determinado click:
document.querySelector("#scrolling-button-right");
Como puedo pasar el nombre de la flecha para poder usarlo como objeto.
No se si me he explicado muy bien
Hola Alex, quizas en un poco tarde para responder! por si aun te sirve te muestro como lograr eso que mencionas con este video en youtube: youtu.be/autXGDn1W54
Saludos!!