Javascript JS：鼠标空闲时自动滚动，手指不接触？

我知道人们会抱怨我没有在这里显示代码，但我认为发布Jquery/JS尝试没有多大价值。唯一重要的是我想在一个部门里做这件事

我的div现在就像

#wrapper {overflow:hidden, width:100%; height:100%, position: absolute}
#content_inside_wrapper {width:100%; height:3000px}  //height is given, never auto

---

基本上，我正在尝试做的，我需要帮助的是，有一些JS代码，当用户不与它交互时，它会自动在包装器内沿一个方向（比如从上到下）垂直滚动

#content_，但当用户滚动鼠标滚轮或用手指拖动时，会覆盖自动滚动，当鼠标再次空闲或用户停止触摸时，返回自动模式。
一个简单的解决方案，就像一个魔咒：


const wrapper=document.getElementById（“wrapper”）；
让时光流逝；
函数initTimer（）{
timerId=setInterval（（）=>wrapper.scrollBy（0，1），50）；
}
initTimer（）；
addEventListener（“touchstart”，（）=>{clearInterval（timerId）}，{passive:true}）；
addEventListener（“touchend”，initTimer，{passive:true}）
body{溢出：隐藏；}
#包装{overflow-y:滚动；宽度：100%；高度：100%；位置：绝对}
#包装内的内容{宽度：100%；高度：3000px}

Lorem
ipsum
dolor
sit
amet
Consequetur
orci
mattis
pulvinar
faucibus
nibh
quis
posuere
lobortis
Nulla
elementum
ex
Consequequat
，
viverra
mollis
ante
ipsum
non
arcu.
Aenean
egestas
arcu
quis
augue
ultrices，
在莫利斯
nulla
vehicula.
Quisque
vel
ipsum
vitae
neque
eficitiur
malesuada.
Nam
ac
tristique
urna.
Sed
a
lacus
id
augue
dapibus
nec
威尼斯
nec
scelerisque
magna。
以下是我对您的问题的看法：我们可以使用
window.requestAnimationFrame
为您执行滚动。我选择不使用
window.setTimeout（）
或
window.setInterval（）
的原因是，由于回调的执行被推到调用堆栈的末尾，因此它不是非常可靠（容易漂移）
window.requestAnimationFrame
将在浏览器可以自由重新绘制后滚动元素，从而优化性能

然后，当您检测到某个事件（例如，
mouseweel
或
touchend
）时，可以选择中断
window.requestAnimationFrame
的递归调用，然后设置超时以再次恢复滚动

请参见下面的概念验证示例：


const scrollSpeedPerSecond=150；
const scroller=document.getElementById（'wrapper'）；
const TimeToWait Before ResumeScrolling=1000；
让以前的时间戳；
让allowScroll=true；
函数scrollStep（）{
如果（！上一个时间戳）
previousTimestamp=新日期（）.getTime（）；
const currentTimestamp=new Date（）.getTime（）；
const elapsedTime=当前时间戳-以前的时间戳；
常量scrollY=scrollSpeedPerSecond/1000*（currentTimestamp-previousTimestamp）；
scroller.scrollBy（0，scrollY）；
//更新上一个时间戳，以便我们可以区分下一个“勾号”，并查看下一次调用需要滚动多远
previousTimestamp=新日期（）.getTime（）；
//我们只希望允许递归调用自身（基本上类似于setInterval，当：
//1.我们还没有滚动到滚动条的末尾
//2.“allowScroll”标志设置为true
如果(
// 1
scroller.scrollTop{
allowScroll=true；
previousTimestamp=新日期（）.getTime（）；
window.requestAnimationFrame（滚动步骤）；
}，继续滚动前的等待时间）；
}
window.addEventListener（“鼠标滚轮”，暂停滚动）；
document.addEventListener（'touchend'，暂停滚动）；
正文{
保证金：0；
填充：0；
}
#包装纸{
溢出：隐藏；
宽度：100vw；
高度：100vh；
位置：绝对位置；
}
#包装内的内容{
宽度：100%；
高度：3000px；
背景图像：
线性梯度（0度，rgba（255255,0）98%，rgba（255255,1）98%），
线性梯度（0度、红色、橙色、黄色、绿色、蓝色、紫色）；
背景尺寸：100%50px，100%100%；
}
您可以使用默认设置为绿色的信号量来解决此问题。如果发生滚动，则该信号量将设置为false（红色），因此，重复事件将检查该信号量。如果为true，则它将进行滚动，并在事件结束时将该信号量设置为true

var semaphore = true;

setInterval(function() {
    if (semaphore) {
        window.scrollBy(0, 1);
    }
    semaphore = true;
}, 50);


window.addEventListener("scroll", function(event) {
    if (semaphore) semaphore = false;
});

您可以类似地处理触摸事件。
我有一个解决方案：


ScrollRate=100；
函数scrollDiv_init（）{
DivElmnt=document.getElementById（'content_-in_-wrapper'）；
ReachedMaxScroll=false；
DivElmnt.scrollTop=0；
PreviousScrollTop=0；
ScrollInterval=setInterval（'scrollDiv（）'，ScrollRate）；
}
函数scrollDiv（）{
如果（！ReachedMaxScroll）{
DivElmnt.scrollTop=上一个scrollTop；
PreviousScrollTop++；
达到MaxScroll=DivElmnt.scrollTop>=（DivElmnt.scrollHeight-DivElmnt.offsetHeight）；
}
否则{
ReachedMaxScroll=（DivElmnt.scrollTop==0）？false:true；
DivElmnt.scrollTop=上一个scrollTop；
上一个滚动顶--；
}
}
函数pauseDiv（）{
清除间隔（滚动间隔）；
}
函数resumeDiv（）{
PreviousScrollTop=DivElmnt.scrollTop；
ScrollInterval=setInterval（'scrollDiv（）'，Scroller