如何在悬停时自动滚动

Question

我正在开发一个滚动条，它可能会显示不同事物的子类别。例如鞋子、衣服等。当您将鼠标悬停在箭头上时，有没有一种方法可以让滚动条自行移动（从左到右，反之亦然，具体取决于箭头的方向）。如果可能的话，我想使用 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>

Answer 1

您可以使用setInterval()、clearInterval()、mouseenter 和mouseleave 事件尝试此解决方案。

当您的鼠标进入包含箭头的div 时，它会设置一个间隔，每10 毫秒为scrollLeft 属性添加或删除1。当鼠标离开箭头时，间隔被清除。

您可以通过更改以毫秒为单位的时间间隔或添加/删除的像素数来调整滚动速度。

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>

Answer 2

我认为这是不可能的，但我会告诉你另一件事

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