javascript - 如何让滚动条在一段时间后自动移动(JavaScript)

Question

我一直在尝试为网站的一部分设计一个滚动条，它是一个 div 类中的矩形框，我想让这个滚动条在一段时间后自动移动，如果用户没有先移动它的话。

代码如下:

div.containerC ::-webkit-scrollbar
{
 width:8px;
 background-color:blue;
}

div.containerC ::-webkit-scrollbar-thumb
 {
 border-radius :10px;
 background-color :#a6a6a6;
 box-shadow : inset 0 0 6px rgba(0,0,0,.3);
 }

div.containerC ::-webkit-scrollbar-track
  {
   border-radius :10px;
   background-color : white;
   box-shadow : inset 0 0 6px rgba(0,0,0,.3);

}
   <div class="containerC">
    <div class="row justify-content-center">
      <div class="col-8" style="height:30%;float:right;">
        <h2 class="text-centerN" style="color : black">
          مشتریان ما
        </h2>
      </div>
      <div class="col-6" style="height: 70% ;float: right;overflow-y: auto;text-align: center;">
        <hr class="my-4">
        <p style="color: grey; right:100%" > 
          نام مشتری<br/>
          نام مشتری<br/>
          نام مشتری<br/>
          نام مشتری<br/>
        </p>
      </div>
    </div>
  </div>

我应该使用什么代码？

Answer 1

您可以使用 setTimeout和 scrollTo最新onscroll之后事件触发。

const scrollDown = 100;
let timer = null;
let containerC = document.getElementsByClassName("containerC")[0]

containerC.addEventListener("scroll", () => {
  if (timer != null) {
    window.clearTimeout(timer)
  }
  window.setTimeout(() => {
    scrollTop = containerC.scrollTop;
    containerC.scrollTo({
      top: scrollTop + scrollDown,
      behavior: "smooth"
    });
  }, 1000); # 1000 milliseconds is one second
}