jQuery – Scroll Stop上的绑定事件

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

奇怪的事实

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

http://jsfiddle.net/2w5zLwvx/

lodash（甚至更小）

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

http://jsfiddle.net/hotw1o2j/

Answer 2

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

然而，你可以做的是模仿事件。

感谢James Padolsey，从他的网页上解除了： 在此处阅读以完全理解代码及其实现方式。

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

可能值得注意的是，有几个与您相关的问题，所以这可能是一个可能的重复。 例如Javascript：用户完成滚动后执行操作和使用javascript滚动滚动条或鼠标滚动后的Fire事件

Answer 3

您可以validationwindow.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