jQuery scroll（）检测用户何时停止滚动

  • Z时代
  • 2024-01-10
  • 分类：问答

好的。

$(window).scroll(function()
{
    $('.slides_layover').removeClass('showing_layover');
    $('#slides_effect').show();
});

我可以从我的理解中得知某人正在滚动。因此，我试图找出有人停下来时该如何捕捉。从上面的示例中，您可以看到发生滚动时，我正在从一组元素中删除一个类。但是，我想在用户停止滚动时重新打开该类。

这样做的原因是，我打算在页面滚动时进行中转节目，以使页面具有我正在尝试的特殊效果。但是我尝试在滚动时删除的一个类与该效果冲突，因为它对某种性质是透明的。

回答：

$(window).scroll(function() {
        clearTimeout($.data(this, 'scrollTimer'));
        $.data(this, 'scrollTimer', setTimeout(function() {
            // do something
            console.log("Haven't scrolled in 250ms!");
        }, 250));
    });

我写了一个扩展来增强jQuery的默认on-event-handler。它将一个或多个事件的事件处理函数附加到选定的元素，如果在给定间隔内未触发事件，则调用处理函数。如果您只想在延迟（例如resize事件等）之后才触发回调，则此功能很有用。

检查github-repo是否有更新很重要！

;(function ($) {
    var on = $.fn.on, timer;
    $.fn.on = function () {
        var args = Array.apply(null, arguments);
        var last = args[args.length - 1];
        if (isNaN(last) || (last === 1 && args.pop())) return on.apply(this, args);
        var delay = args.pop();
        var fn = args.pop();
        args.push(function () {
            var self = this, params = arguments;
            clearTimeout(timer);
            timer = setTimeout(function () {
                fn.apply(self, params);
            }, delay);
        });
        return on.apply(this, args);
    };
}(this.jQuery || this.Zepto));

像其他任何处理程序on或bind-event处理程序一样使用它，除了可以在最后传递一个额外的参数外：

$(window).on('scroll', function(e) {
    console.log(e.type + '-event was 250ms not triggered');
}, 250);

（此演示使用resize代替scroll）

以上是 jQuery scroll（）检测用户何时停止滚动 的全部内容， 来源链接： utcz.com/qa/430723.html

回到顶部