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
}

Answer 2

这是一个快速的自动滚动实现。如果用户没有在x秒内滚动（例如2秒），它将自动滚动容器div。一旦用户滚动，它将暂停，然后在一段时间不活动后再次开始。

$(document).ready(function() {
  
  var scrollHandler = null;
  
  function autoScroll () {
    clearInterval(scrollHandler);
    scrollHandler = setInterval(function() {
      var nextScroll = $('.containerC').scrollTop() + 20;
      $('.containerC').scrollTop(nextScroll);
    },2000);
  }
  
   $('.containerC').scroll(function() {
    // Stop interval after user scrolls
    clearInterval(scrollHandler);
    // Wait 2 seconds and then start auto scroll again
    // Or comment out this line if you don't want to autoscroll after the user has scrolled once
    setTimeout(autoScroll, 200);
   });
   
   autoScroll();
});

.containerC {
  overflow: auto;
  height: 40px;
  width: 100%;
  border: 1px solid #222;
}

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);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

如何使滚动条在一段时间后自动移动（JavaScript）

2 个答案: