javascript - How can I scroll automatically on hover - Stack Overflow

admin管理员组

文章数量:1289352

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: '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>

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: '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>

• javascript
• html
• css

Share Improve this question Follow edited Oct 8, 2022 at 9:32 Parit Sawjani asked Mar 2, 2022 at 13:09 Parit SawjaniParit Sawjani 90811 gold badge1313 silver badges2929 bronze badges 2

• Does this answer your question? Scroll the div content in a controlled manner on hovering over an image – Tom Commented Mar 2, 2022 at 13:12
• It gave me an idea of how it could look/work, however it doesn't seem to have any solutions in plain js cause I don't wanna add a whole library to my project for something small, also I've never worked with jquery so I don't really understand it – Parit Sawjani Commented Mar 2, 2022 at 17:49

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

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>

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>

本文标签： javascriptHow can I scroll automatically on hoverStack Overflow