jQuery -在滚动停止上绑定事件

If i want to bind an event on page scrolling i can use scroll();.

如果我想在页面滚动中绑定一个事件，我可以使用scroll();。

But how to fire when scroll() is ended up?

但是，当卷轴()结束时，如何触发?

I would like to reproduce this:

我想复制这个:

   $(window).scroll(function(){
    //do somenthing
    });

    $(window).scrollSTOPPED(function(){  //--> when i'm scrolling then i stop to scrolling (so NOT when page scrollbar is at the end top or bottom :)
    //do somenthing else
    });

any ideas?

什么好主意吗?

4 个解决方案

#1

tiny jquery way

$.fn.scrollStopped = function(callback) {
  var that = this, $this = $(that);
  $this.scroll(function(ev) {
    clearTimeout($this.data('scrollTimeout'));
    $this.data('scrollTimeout', setTimeout(callback.bind(that), 250, ev));
  });
};

After 250 ms from the last scroll event, this will invoke the "scrollStopped" callback.

在上次滚动事件发生250毫秒后，将调用“scrollStopped”回调。

http://jsfiddle.net/wtRrV/256/

http://jsfiddle.net/wtRrV/256/

strange fact

clearTimeout and clearInterval params don't have to be defined and can even be wrong types or even omitted.

clearTimeout和clearInterval params不必定义，甚至可能是错误的类型，甚至可能被忽略。

http://jsfiddle.net/2w5zLwvx/

http://jsfiddle.net/2w5zLwvx/

lodash (even smaller)

function onScrollStopped(domElement, callback) {
  domElement.addEventListener('scroll', _.debounce(callback, 250));
}

http://jsfiddle.net/hotw1o2j/

http://jsfiddle.net/hotw1o2j/

#2

the event itself doesn't exist as scroll is a single event fired everytime the user scrolls by a certain increment.

事件本身并不存在，因为每次用户以一定的增量滚动时，都会触发一个事件。

What you can do however is emulate the event.

但是，您可以模仿这个事件。

Credit to James Padolsey for this, lifted from his webpage:. Read it here to fully understand the code and how it is implemented.

这要归功于詹姆斯·帕多尔西(James Padolsey)。请阅读本文，以充分理解代码及其实现方式。

http://james.padolsey.com/javascript/special-scroll-events-for-jquery/

http://james.padolsey.com/javascript/special-scroll-events-for-jquery/

(function(){

(函数(){

var special = jQuery.event.special,
    uid1 = 'D' + (+new Date()),
    uid2 = 'D' + (+new Date() + 1);

special.scrollstart = {
    setup: function() {

        var timer,
            handler =  function(evt) {

                var _self = this,
                    _args = arguments;

                if (timer) {
                    clearTimeout(timer);
                } else {
                    evt.type = 'scrollstart';
                    jQuery.event.handle.apply(_self, _args);
                }

                timer = setTimeout( function(){
                    timer = null;
                }, special.scrollstop.latency);

            };

        jQuery(this).bind('scroll', handler).data(uid1, handler);

    },
    teardown: function(){
        jQuery(this).unbind( 'scroll', jQuery(this).data(uid1) );
    }
};

special.scrollstop = {
    latency: 300,
    setup: function() {

        var timer,
                handler = function(evt) {

                var _self = this,
                    _args = arguments;

                if (timer) {
                    clearTimeout(timer);
                }

                timer = setTimeout( function(){

                    timer = null;
                    evt.type = 'scrollstop';
                    jQuery.event.handle.apply(_self, _args);

                }, special.scrollstop.latency);

            };

        jQuery(this).bind('scroll', handler).data(uid2, handler);

    },
    teardown: function() {
        jQuery(this).unbind( 'scroll', jQuery(this).data(uid2) );
    }
};   })();

Probably worth noting that there are several questions related to yours, so this may be a possible duplication. e.g. Javascript: do an action after user is done scrolling and Fire event after scrollling scrollbars or mousewheel with javascript

可能值得注意的是，有几个问题与您有关，所以这可能是重复的。Javascript:在用户完成滚动后执行操作，在滚动滚动滚动条或鼠标滚轮后触发事件

#3

You can verify if window.scrollY == 0

您可以验证if窗口。scrollY = = 0

$(window).scroll(function(){
  if (window.scrollY == 0) {
    //...
  }
});

But this event will be fired at every scroll.

但是这个事件会在每一个卷轴上被触发。

#4

I prefer to be able to listen on a event. This is what I do:

我更喜欢能听一件事。这就是我所做的:

The jquery plugin:

jquery插件:

+function(jQuery){
        var scrollStopEventEmitter = function(element, jQuery) {
            this.scrollTimeOut = false;
            this.element       = element;
            jQuery(element).on('scroll', $.proxy(this.onScroll, this));
        }

        scrollStopEventEmitter.prototype.onScroll = function() 
        {
            if (this.scrollTimeOut != false) {
              clearTimeout(this.scrollTimeOut);
            }

            var context = this;

            this.scrollTimeOut = setTimeout(function(){ context.onScrollStop()}, 250);
        }

        scrollStopEventEmitter.prototype.onScrollStop = function() 
        {
            this.element.trigger('scrollStop');
        }

        jQuery.fn.scrollStopEventEmitter = function(jQuery) {   
            return new scrollStopEventEmitter(this, jQuery);
        };

    }($);

In this case, window will now trigger scrollStop event

在这种情况下，窗口现在将触发scrollStop事件

$(window).scrollStopEventEmitter($);

Now I can listen on scrollStop

现在我可以在scrollStop上监听了

$(window).on('scrollStop',function(){
        // code