Question

使用此javascript在使用setTimeout延迟5秒后滚动到div（#Content）。

setTimeout(function () {
    $('html, body').animate({ scrollTop: $('#Content').offset().top - 0 }, 1000);
}, 5000);

如果用户在5s过去之前手动滚动，我将如何取消此操作。原因是，如果用户已滚动，如果页面自动滚动，则会感到恼火。

尝试将其放入window.load并检查if（$（window）.scrollTop（）== 0）但当然在window.load中始终为true，并且用户不会手动滚动取消。< / p>

谢谢！

Answer 1

你可以使用例如全局变量并检查它是否由事件滚动

设置

var scrolled = false;
$(document).scroll(function(){scrolled = true;});
setTimeout(function () { 
 if (!scrolled){
    $('html, body').animate({ scrollTop: $('#Content').offset().top - 0 }, 
    1000); }
  }
}, 5000);

Answer 2

您应该将超时定义为变量，以便能够使用clearTimeout

取消它

请参阅此处的完整文档：https://www.w3schools.com/jsref/met_win_cleartimeout.asp

只需添加一个事件来检查oyur滚动并在滚动时清除超时

例如：

var myVar = setTimeout(function(){ 
   $('html, body').animate({ scrollTop: $('#Content').offset().top - 0 }, 1000); 
}, 5000);

并取消滚动：

$(document).scroll(function(){
 clearTimeout(myVar)
}

Answer 3

您可以通过为scroll添加事件hanlder来运行用于检查滚动的逻辑，然后在完成检查后删除事件处理程序，因为它只需要运行一次。此外，您可以使用eventHandler代码中的clearTimeout清除setTimeout。

window.addEventListener('scroll', scrollEventHandler);

function scrollEventHandler(e){
    clearTimeout(...setTimeoutid) // Pass in setTimeout Id.    
}

setTimeout(function () {
         $('html, body').animate({ scrollTop: $('#Content').offset().top - 0 }, 1000);
         window.removeEventListener('scroll', scrollEventHandler);
}, 5000);

Answer 4

您可以像其他人一样清除超时，或者您可以让它运行但在开始滚动动画之前执行scrollTop检查：

setTimeout(function () {
    if ($(window).scrollTop() == 0) {
        $('html, body').animate({ scrollTop: $('#Content').offset().top - 0 }, 1000);
    }
}, 5000);

如果用户滚动页面，如何取消javascript函数

4 个答案: