在用户单击或触摸时停止滚动动画 | JavaScript

Question

我有这个JS脚本：

function scrollToTop() {
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (scrollTop > 0) {
window.requestAnimationFrame(scrollToTop);
window.scrollTo(0, scrollTop - scrollTop / 8);
}
}

工作“很好”，平滑地滚动到顶部，但我需要它在用户单击、触摸甚至用鼠标滚动时停止。 实际的问题是，它不会停止，直到到达顶部，有时，如果用户在完成滚动到顶部之前执行某些操作，页面就会卡住，并且必须重新加载。

谢谢！

Answer 1

我建议您添加

eventListeners

，当使用子句触发时取消滚动动画，无论动画是否应该继续。

let isScrolling = true;

function scrollToTop() {
    const scrollTop = document.documentElement.scrollTop || 
document.body.scrollTop;
    if (scrollTop > 0 && isScrolling) {
    window.requestAnimationFrame(scrollToTop);
    window.scrollTo(0, scrollTop - scrollTop / 8);
}

}

function stopScrolling() {
    isScrolling = false;

}

scrollToTop();


window.addEventListener('scroll', stopScrolling);
window.addEventListener('click', stopScrolling);
window.addEventListener('touchstart', stopScrolling);