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屋！