JavaScript: 用户滚动完页面后执行操作

Question

我正在想办法实现这一点。我有一个箱子列表，每个箱子大约高度为150px。我正在使用JavaScript（和jQuery），希望在用户滚动页面之后，页面会自动滚动，以便将盒子与页面的其余部分对齐（也就是说，如果用户滚动并且页面的y位置不能被150整除，它会滚动到最近的点）。

目前，我知道可以使用.scroll() jQuery事件来激活事件，并可以使用.scrollTop()将其移动到某个点。但是，每次用户移动滚动条时，整个函数都会激活。所以，是否有一种延迟函数触发的方法，直到用户没有滚动，并且如果他们再次开始滚动，则函数将停止？

- DavidR

Answer 1

由于您已经在使用jQuery，因此请查看Ben Alman的doTimeout插件，它已经处理了方法的防抖动（这正是您需要的内容）。

以下示例来自他的网站：

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

- Felix Kling

---

+1 不错的插件，而且只有1k大小。在jQuery 1.5中应该加入防抖功能 :) - Šime Vidas

兄弟，太美妙了。我从未想过我会如此喜欢一个插件。 - DavidR

我希望有人已经实现了这个想法并且取得了成功。谢谢！ - Matt

这是否考虑了iOS设备上的减速？我看到滚动列表仍在减速并且尚未完全停止时，滚动结束事件被触发。 - Hetal Vora

@HetalVora：那么显然它并没有。我不知道iOS如何处理惯性滚动。 - Felix Kling

Answer 2

这基本上与Šime Vidas的答案相同，但更简单：

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

500是延迟时间，对于鼠标滚动应该没问题。

- lenooh

Answer 3

当滚动事件的处理程序被触发时，可以延迟100到200毫秒启动一个setTimeout。将设置在滚动事件处理程序内部的setTimeout函数执行上述位置逻辑。还要让滚动事件处理程序清除自己设置的任何超时。这样，最后一次滚动事件被触发时，setTimeout函数将完成，因为滚动事件没有清除它。

- Macy Abbey

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;
}

- Šime Vidas

Answer 5

这种情况下，纯JavaScript会非常有用。

var yourFunction = function(){
  // do something computationally expensive
}

$(window).scroll(function(){
  yfTime=setTimeout("yourFunction()",250);
});

- Alan Mabry

---

1. $(window) 不是 JavaScript，它是 jQuery。
2. 这将为用户滚动的每个像素排队一堆 setTimeout。

- aug