Question

0

300

Views

How can I scroll automatically on hover

I am working on a scrollbar that would likely display sub-categories of different things. e.g Shoes, Clothes etc. Is there a way where I can make the scrollbar move on its own when you hover over arrows (from left to right and vice versa depending on direction of arrow). If possible I would like to use 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>

about 4 years ago · Juan Pablo Isaza

2 answers

Answer question

0

I think that's not possible but I will tell you another thing

.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>

about 4 years ago · Juan Pablo Isaza Report

Answer question

Find remote jobs

Accepted Answer · 2022-07-03T18:21:28.133Z

You could try this solution using setInterval(), clearInterval(), the mouseenter and mouseleave events.

When your mouse enters a div containing an arrow, it sets an interval that adds or removes 1 to the scrollLeft property every 10ms. When your mouse leaves the arrow, the interval is cleared.

You can adjust the scrolling speed by changing either the time interval in ms or the number of pixels that is added/removed.

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">&lt;</div>
  <div class="right">&gt;</div>
</div>

0

300

How can I scroll automatically on hover

2 answers

0

0

Find remote jobs

Andres GPT