我一直在尝试为网站的一部分设计一个滚动条,它是一个 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>
我应该使用什么代码?
最佳答案
您可以使用 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
}
关于javascript - 如何让滚动条在一段时间后自动移动(JavaScript),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52391221/