jQuery - Scroll Stop上的绑定事件

Question

如果我想在页面滚动上绑定一个事件,我可以使用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
    });

有任何想法吗？

Answer 1

微小的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/

奇怪的事实

clearTimeout和clearInterval参数不必定义,甚至可以是错误的类型甚至省略.

http://jsfiddle.net/2w5zLwvx/