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

问题描述

好的..

  $（窗口）.scroll（function（）
 {
 $（'。slides_layover'）。removeClass（'showing_layover'）; 
 $（'＃slides_effect'）。show（）; 
}）; 
  

我可以告诉别人什么时候滚动我的理解。因此，我试图找出当有人停下来时如何捕捉。从上面的示例中，您可以看到我正在滚动时从一组元素中删除一个类。但是，我希望在用户停止滚动时重新启用该类。

原因是我打算在页面滚动到的时候进行停留显示给页面一个特殊的效果，我正在努力。但是我试图在滚动时删除的一个类与该效果冲突，因为它具有某种性质的透明效果。

解决方案

  $（window）.scroll（function（）{
 clearTimeout（$。data（this，'scrollTimer'））; 
 $ .data（this，'scrollTimer' ，setTimeout（function（）{
 //做一些事情
 console.log（没有滚动250ms！）; 
}，250））; 
}） ; 
  

更新

<我写了一个扩展来增强jQuery在 -event-handler上的默认。它将一个或多个事件的事件处理函数附加到所选元素，并在给定间隔未触发事件时调用处理函数。如果您只想在延迟之后触发回调，例如调整大小事件等，这很有用。

检查github-repo的更新非常重要！

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）; 
 }，延迟）; 
}）; 
 
 return on.apply（this，args）; 
}; 
}（this.jQuery || this.Zepto））; 
  

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

  $（window）.on（'scroll'，function（e）{
 console.log（e.type +' -  event是250ms not triggered'）; 
}，250）; 
  

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

（此演示使用调整大小而不是滚动，但是谁在乎？！）

Ok with this..

$(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));
});

Update

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.

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

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/

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

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