jQuery - Scroll Stop上的绑定事件

问题描述

如果我想在页面滚动上绑定一个事件，我可以使用 scroll（）; 。

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

但是当 scroll（）结束时如何触发？

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

我想重现这个：

   $(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方式

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

从上次滚动事件开始250毫秒后，这将调用scrollStopped回调。

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

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

function onScrollStopped(domElement, callback, timeout = 250) {
  domElement.addEventListener('scroll', () => {
    clearTimeout(callback.timeout);
    callback.timeout = setTimeout(callback, timeout);
  });
}

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

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

这篇关于jQuery - Scroll Stop上的绑定事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！