Question

我正在使用iframe Vimeo视频作为我网站的标题，并且我使用的是一个Javascript，让页面在一定时间后向下滚动到某个div。

因此，当视频播放完毕后，页面会自动向下滚动到下一个div。

但是当你没有看完视频并且已经向下滚动时，当页面再次自动向上滚动时会很烦人。

我该怎么办？对此有不同的解决方案吗？或者我可以在页面达到它应该去的div时停止Javascript函数吗？

我希望我很清楚。

这是脚本

$(window).load(function () {
//normally you'd wait for document.ready, but you'd likely to want to wait
//for images to load in case they reflow the page
$('body').delay(36000) //wait 5 seconds
    .animate({
        //animate jQuery's custom "scrollTop" style
        //grab the value as the offset of #second from the top of the page
        'scrollTop': $('.first-block').offset().top
    }, 1000); //animate over 300ms, change this to however long you want it to animate for
});

Answer 1

您需要注册一个滚动侦听器，您可以通过调用此处所述的clearTimeout()来停止执行超时功能：http://www.w3schools.com/jsref/met_win_settimeout.asp

var animation = setTimeout(function() {
   $('body').animate({
       'scrollTop': $('.first-block').offset().top
    }, 1000);
}, 36000);

$(window).scroll(function() {
   clearTimeout(animation); // stop the timeout to be executed
   $(window).off('scroll'); // we don't need this handler any more so unregister
});

作为奖励，您可以通过off()禁用滚动监听器，如果您没有像问题中那样活动的滚动脚本。因此不必再次调用滚动函数和clearTimeout()。另见：https://api.jquery.com/off/

Answer 2

通过setTimeout将延迟分配给变量。

var delay = setTimeout(function(){ 
    $('body').animate({
        'scrollTop': $('.first-block').offset().top
    }, 1000);
}, 36000);

如果用户滚动，您可以清除先前通过clearTimeout分配的超时：

$(window).scroll(function () {
    clearTimeout(delay);
});

滚动div时停止Javascript函数

2 个答案: