Javascript:用户完成滚动后执行操作

Question

我正在试图找到一种方法来做到这一点.我有一个盒子列表,每个都150px很高.我正在使用javascript(和jquery),并希望在用户向下滚动页面后,页面将自动滚动,以便框与页面的其余部分对齐(也就是说,如果用户滚动和y页面的位置不能被150整除,它将滚动到最近的点).

现在,我现在知道我可以使用.scroll()jquery事件激活一个事件,我可以使用它来移动到某一点.scrollTop().但是用户移动滚动条的每个像素都会激活整个功能.那么有没有办法延迟功能从触发直到用户没有滚动,如果他们应该再次开始滚动,该功能将停止？

Answer 1

正如你已经在使用jQuery一样,看看Ben Alman的doTimeout插件,它已经处理了方法的去抖动(这就是你所追求的).

从他的网站无耻地偷走的例子:

$(window).scroll(function(){
   $.doTimeout( 'scroll', 250, function(){
      // do something computationally expensive
   });
});

Answer 2

这与ŠimeVidas的答案基本相同,但不太复杂:

var scrollTimeout = null;
$(window).scroll(function(){
    if (scrollTimeout) clearTimeout(scrollTimeout);
    scrollTimeout = setTimeout(function(){yourFunctionGoesHere()},500);
});

500是延迟.鼠标滚动应该没问题.

Answer 3

当然,在scroll事件的事件处理程序中,触发setTimeout 100或200毫秒之后.让您在scroll事件处理程序中设置的setTimeout函数执行上面提到的定位逻辑.还有滚动事件处理程序清除自己设置的任何超时.这样,上次滚动事件触发时,setTimeout函数将完成,因为滚动事件尚未清除它.

Answer 4

代码:

var scrollTimeout = null;
var scrollendDelay = 500; // ms

$(window).scroll(function() {
    if ( scrollTimeout === null ) {
        scrollbeginHandler();
    } else {
        clearTimeout( scrollTimeout );
    }
    scrollTimeout = setTimeout( scrollendHandler, scrollendDelay );
});

function scrollbeginHandler() {
    // this code executes on "scrollbegin"
    document.body.style.backgroundColor = "yellow";
}

function scrollendHandler() {
    // this code executes on "scrollend"
    document.body.style.backgroundColor = "gray";
    scrollTimeout = null;
}