用户停止滚动时的事件

Question

当用户滚动页面时，我想做一些花哨的jQuery东西。但我不知道如何解决这个问题，因为只有scroll（）方法。

有任何想法吗？

Answer 1

下面是一个使用setTimeout在用户停止滚动时触发函数的简单示例：(function() {            var timer;    $(window).bind('scroll',function () {        clearTimeout(timer);        timer = setTimeout( refresh , 150 );    });    var refresh = function () {         // do stuff        console.log('Stopped Scrolling');     };})();在滚动事件触发时清除计时器。滚动停止后，将触发刷新功能。或者作为插件：$.fn.afterwards = function (event, callback, timeout) {    var self = $(this), delay = timeout || 16;    self.each(function () {         var $t = $(this);        $t.on(event, function(){            if ($t.data(event+'-timeout')) {                clearTimeout($t.data(event+'-timeout'));            }            $t.data(event + '-timeout', setTimeout(function () { callback.apply($t); },delay));        })    });    return this;};在div（带命名空间）上的最后一个滚动事件的100ms之后触发回调：$('div.mydiv').afterwards('scroll.mynamespace', function(e) {        // do stuff when stops scrolling        $(this).addClass('stopped');    }, 100);我用它来滚动和调整大小。

Answer 2

这是另一个基于提到的相同想法的更通用的解决方案：var delayedExec = function(after, fn) {    var timer;    return function() {        timer && clearTimeout(timer);        timer = setTimeout(fn, after);    };};var scrollStopper = delayedExec(500, function() {    console.log('stopped it');});document.getElementById('box').addEventListener('scroll', scrollStopper);