jQuery -绑定滚动停止事件

jQuery - bind event on Scroll Stop

本文关键字:事件 滚动 绑定 jQuery      更新时间:2023-09-26

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

但是当scroll()结束时如何开火?

我想复制这个:

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

任何想法?

小的jquery方式

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

在最后一个滚动事件发生250毫秒后,这将调用"scrollStopped"回调。

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

lodash(更小)

function onScrollStopped(domElement, callback) {
  domElement.addEventListener('scroll', _.debounce(callback, 250));
}
http://jsfiddle.net/hotw1o2j/

纯js(技术上最小)

function onScrollStopped(domElement, callback, timeout = 250) {
  domElement.addEventListener('scroll', () => {
    clearTimeout(callback.timeout);
    callback.timeout = setTimeout(callback, timeout);
  });
}
https://jsfiddle.net/kpsxdcv8/15/

奇怪的事实

clearartimeout和clearInterval参数不需要定义,甚至可以是错误的类型,甚至可以省略。

http://jsfiddle.net/2w5zLwvx/

事件本身不存在,因为scroll是用户每次滚动一定增量时触发的单个事件。

你能做的就是模拟事件。

这要归功于James Padolsey,摘自他的网页:请阅读此处以完全理解代码及其实现方式。

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

(函数(){

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) );
    }
};   })();
可能值得注意的是,有几个问题与你的有关,所以这可能是重复的。如。Javascript:在用户完成滚动后执行一个操作使用javascript滚动滚动条或鼠标滚轮后触发事件

可以验证window.scrollY == 0

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

但是这个事件会在每次滚动时触发

我更喜欢能够侦听事件。我是这样做的:

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

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

$(window).scrollStopEventEmitter($);

现在我可以监听scrollStop

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