jQuery scroll() 检测用户何时停止滚动 [英] jQuery scroll() detect when user stops scrolling

问题描述

好的..

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

我可以根据我的理解判断何时有人在滚动.因此，我试图弄清楚如何在有人停下来时捕捉.从上面的示例中，您可以看到我在滚动时从一组元素中删除了一个类.但是，我想在用户停止滚动时重新打开该类.

I can tell when someone is scrolling from what I understand. So with that I am trying to figure out how to catch when someone has stopped. From the above example you can see I am removing a class from a set of elements while the scrolling is occurring. However, I want to put that class back on when the user stops scrolling.

这样做的原因是我打算在页面滚动时进行一次停留显示，以使页面具有我正在尝试处理的特殊效果.但是我在滚动时试图删除的一个类与该效果冲突，因为它具有某种性质的透明效果.

The reason for this is I am intent on having a layover show while the page is scrolling to give the page a special effect I am attempting to work on. But the one class I am trying to remove while scrolling conflicts with that effect as its a transparency effect to some nature.

推荐答案

$(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.它将一个或多个事件的事件处理函数附加到所选元素，如果在给定的时间间隔内未触发事件，则调用处理函数.如果您只想在延迟后触发回调，例如调整大小事件等，这将非常有用.

I wrote an extension to enhance jQuery's default on-event-handler. It attaches an event handler function for one or more events to the selected elements and calls the handler function if the event was not triggered for a given interval. This is useful if you want to fire a callback only after a delay, like the resize event, or such.

检查 github-repo 的更新很重要！

It is important to check the github-repo for updates!

https://github.com/yckart/jquery.unevent.js

;(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 事件处理程序一样使用它，除了你可以传递一个额外的参数作为最后一个:

Use it like any other on or bind-event handler, except that you can pass an extra parameter as a last:

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

http://yckart.github.com/jquery.unevent.js/

(此演示使用 resize 而不是 scroll，但谁在乎?！)

(this demo uses resize instead of scroll, but who cares?!)

这篇关于jQuery scroll() 检测用户何时停止滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！