Javascript：用户完成滚动后执行操作 [英] Javascript: do an action after user is done scrolling

问题描述

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

I'm trying to figure out a way to do this. I have a list of boxes, each about 150px high. I am using javascript (and jquery) and want that, after a user scrolls down a page, the page will auto scroll so that the boxes line up with the rest of the page (that is to say, if the user scrolls and the y position of the page is not divisible by 150, it will scroll to that nearest point).

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

Now, I at the moment, I know I can activate an event using the .scroll() jquery event, and I can make it move to a certain point using .scrollTop(). But every pixel the user moves the scroll bar activates the whole function. So is there a way to delay the function from firing until the user hasn't scrolled, and if they should begin to scroll again, the function will halt?

推荐答案

由于您已经在使用jQuery，请查看 Ben Alman的 doTimeout 插件 已经处理了 debouncing 方法（这就是你所追求的）。

As you are already using jQuery, have a look at Ben Alman's doTimeout plugin which already handles the debouncing of methods (which is what you are after).

无耻地被盗的例子来自他的网站：

Example shamelessly stolen from his website:

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

这篇关于Javascript：用户完成滚动后执行操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！