反应:当我按下按钮时慢慢滚动页面，当我按下另一个按钮时停止滚动

Question

我正在开发一个可以呈现文章、书籍和长文本的应用程序。该应用程序有两个按钮；"开始"；以及"；停止"；"启动"；使页面滚动缓慢，当您再次按下时，按钮图标将变为更快的滚动，因此3步操作，用户可以在不使用滚动的情况下阅读文本。当用户点击"；停止"；按钮或页面到达末尾时，滚动停止。

我知道如何从当前滚动的状态更改按钮，但如何使页面滚动并在按下按钮时停止它不适合我的头脑。

请帮助解决这个问题。让屏幕不受控制地移动到所需的部分并不像我上面描述的那样困难。

谢谢。

附言：如果答案被用于打字，我将更加感激。

Answer 1

为了让页面在底部停止滚动，您需要添加以下函数。此任务将完成。我希望它对某些人有用。

window.onscroll = () => {
if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
clearInterval(myInterval);
}
};

Answer 2

您可以使用window.sollBy((方法滚动页面

我只是分享了一些有助于你工作的示例代码。。我不知道当滚动到达结束时如何停止滚动

var myInterval = setInterval(()=>onBtnClick('stop'), 1000000);
const scroll = (speed) => {
window.scrollBy({
top: speed,
left: 0,
behavior: 'smooth'
})
}

const onBtnClick = (type) => {
switch(type) {
case 'start1':
myInterval = setInterval(()=>scroll(10), 100)
break
case 'start2':
myInterval = setInterval(()=>scroll(20), 100)
break
case 'stop':
clearInterval(myInterval)
break
case 'reverse':
myInterval = setInterval(()=>scroll(-10), 100)
break
}
}

onBtnClick("start1") // slow scroll
onBtnClick("start2") // fast scroll
onBtnClick("stop") // stop