jQuery的 - 上滚动停止绑定事件(jQuery - bind event on Scroll

如果我要绑定页面上的事件滚动，我可以使用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 PARAMS没有定义，甚至可能是错误的类型，甚至省略。

http://jsfiddle.net/2w5zLwvx/

Answer 2:

本身不存在为滚动事件是由一定的增量每次发射的用户滚动一个单一事件。

但是什么你可以做的是模拟的事件。

感谢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：用户完成滚动后做一个动作和scrollling滚动条或鼠标滚轮使用javascript后火灾事件

Answer 3:

您可以验证，如果window.scrollY == 0

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

但是，本次活动将在每个滚动被解雇。

Answer 4:

我更喜欢能够听一个事件。 这是我做的：

的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

文章来源: jQuery - bind event on Scroll Stop