Estoy trabajando en una barra de desplazamiento que probablemente mostraría subcategorías de diferentes cosas. por ejemplo, zapatos, ropa, etc. ¿Hay alguna manera en la que pueda hacer que la barra de desplazamiento se mueva por sí sola cuando pasa el cursor sobre las flechas (de izquierda a derecha y viceversa, dependiendo de la dirección de la flecha). Si es posible, me gustaría usar Vanilla JS
.collections-nav { white-space: nowrap; overflow-x: auto; display: flex; gap: 15px; padding-left: 0rem; margin-top: 2rem; padding-bottom: 1.5rem; } .collections-nav li { background: #FFF; border-radius: 50px; padding: 7px 20px; font-size: 0.75rem; box-shadow: 0 2px 5px 0 rgb(0 0 0 / 5%); /* font-family: 'Objectivity-Medium', sans-serif; */ font-family: 'Open-Bold', sans-serif; color: #0A2540; list-style-type: none; cursor: pointer; } .collections-nav li:hover { background: #0a2540; opacity: 0.95; transition: 0.3s ease-in-out; color: #FFF; } .collections-nav .active { background: #0A2540; color: #FFF; } .collections-nav::-webkit-scrollbar { height: 7px !important; /* width of the entire scrollbar */ } .collections-nav::-webkit-scrollbar-track { background: #F6F9FC; /* color of the tracking area */ border-radius: 10px; } .collections-nav::-webkit-scrollbar-thumb { background-color: #0A2540; /* color of the scroll thumb */ border-radius: 10px; } <div class="collections"> <ul class="collections-nav nav-tabs pb-3"> <li class="active">Home</li> <li>Profile</li> <li>Content</li> <li>Content</li> <li>Content</li> <li>Content</li> <li>Content</li> <li>Content</li> <li>Content</li> </ul> </div>Puede probar esta solución usando setInterval() , clearInterval() , los eventos mouseenter y mouseleave .
Cuando su mouse ingresa a un div que contiene una flecha, establece un intervalo que agrega o elimina 1 a la propiedad scrollLeft cada 10 ms. Cuando el mouse deja la flecha, el intervalo se borra.
Puede ajustar la velocidad de desplazamiento cambiando el intervalo de tiempo en ms o la cantidad de píxeles que se agregan o eliminan.
let nav = document.querySelector(".collections-nav"); let left = document.querySelector(".arrow-container .left"); let right = document.querySelector(".arrow-container .right"); let idx; left.addEventListener("mouseenter", function(){ idx = setInterval(() => nav.scrollLeft -= 1, 10); }); left.addEventListener("mouseleave", function(){ clearInterval(idx); }); right.addEventListener("mouseenter", function(){ idx = setInterval(() => nav.scrollLeft += 1, 10); }); right.addEventListener("mouseleave", function(){ clearInterval(idx); }); .collections-nav { white-space: nowrap; overflow-x: auto; display: flex; gap: 15px; padding-left: 0rem; margin-top: 2rem; padding-bottom: 1.5rem; } .collections-nav li { background: #FFF; border-radius: 50px; padding: 7px 20px; font-size: 0.75rem; box-shadow: 0 2px 5px 0 rgb(0 0 0 / 5%); /* font-family: 'Objectivity-Medium', sans-serif; */ font-family: 'Open-Bold', sans-serif; color: #0A2540; list-style-type: none; cursor: pointer; } .collections-nav li:hover { background: #0a2540; opacity: 0.95; transition: 0.3s ease-in-out; color: #FFF; } .collections-nav .active { background: #0A2540; color: #FFF; } .collections-nav::-webkit-scrollbar { height: 7px !important; /* width of the entire scrollbar */ } .collections-nav::-webkit-scrollbar-track { background: #F6F9FC; /* color of the tracking area */ border-radius: 10px; } .collections-nav::-webkit-scrollbar-thumb { background-color: #0A2540; /* color of the scroll thumb */ border-radius: 10px; } .arrow-container { display: flex; justify-content: space-between; } <div class="collections"> <ul class="collections-nav nav-tabs pb-3"> <li class="active">Home</li> <li>Profile</li> <li>Content</li> <li>Content</li> <li>Content</li> <li>Content</li> <li>Content</li> <li>Content</li> <li>Content</li> </ul> </div> <div class="arrow-container"> <div class="left"><</div> <div class="right">></div> </div>Creo que eso no es posible, pero te diré otra cosa.
.collections-nav { white-space: nowrap; overflow-x: auto; display: flex; gap: 15px; padding-left: 0rem; margin-top: 2rem; padding-bottom: 1.5rem; } .collections-nav li { background: #FFF; border-radius: 50px; padding: 7px 20px; font-size: 0.75rem; box-shadow: 0 2px 5px 0 rgb(0 0 0 / 5%); /* font-family: 'Objectivity-Medium', sans-serif; */ font-family: 'Open-Bold', sans-serif; color: #0A2540; list-style-type: none; cursor: pointer; } .collections-nav li:hover { background: #0a2540; opacity: 0.95; transition: 0.3s ease-in-out; color: #FFF; } .collections-nav .active { background: #0A2540; color: #FFF; } .collections-nav::-webkit-scrollbar { height: 7px !important; /* width of the entire scrollbar */ } body{ scroll-behavior: smooth;} .collections-nav::-webkit-scrollbar-track { background: #F6F9FC; /* color of the tracking area */ border-radius: 10px; } .collections-nav::-webkit-scrollbar-thumb { background-color: #0A2540; /* color of the scroll thumb */ border-radius: 10px; } <div class="collections"> <ul class="collections-nav nav-tabs pb-3"> <a href="#content"><button> Hover </button> <li class="active">Home</li> <li>Profile</li> <li>Content</li> <li>Content</li> <li>Content</li> <li>Content</li> <li>Content</li> <li>Content</li> <li id="content">Content</li> </ul> </div>