如果我想在页面滚动时绑定一个事件，我可以使用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
});
有任何想法吗？
$.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/
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);
});
}
https://jsfiddle.net/kpsxdcv8/15/
clearTimeout 和 clearInterval 参数不必定义，甚至可以是错误类型甚至省略。
事件本身不存在，因为滚动是每次用户滚动特定增量时触发的单个事件。
但是，您可以做的是模拟事件。
这要归功于 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