用户停止滚动时的事件

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