jQuery -绑定滚动停止事件
jQuery - bind event on 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
});
任何想法?
小的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/奇怪的事实clearartimeout和clearInterval参数不需要定义,甚至可以是错误的类型,甚至可以省略。
http://jsfiddle.net/2w5zLwvx/事件本身不存在,因为scroll是用户每次滚动一定增量时触发的单个事件。
你能做的就是模拟事件。
这要归功于James Padolsey,摘自他的网页:请阅读此处以完全理解代码及其实现方式。
http://james.padolsey.com/javascript/special-scroll-events-for-jquery/可能值得注意的是,有几个问题与你的有关,所以这可能是重复的。如。Javascript:在用户完成滚动后执行一个操作使用javascript滚动滚动条或鼠标滚轮后触发事件(函数(){
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) ); } }; })();
可以验证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
相关文章:
- 只覆盖箭头键滚动事件
- Javascript如何找到滚动事件的来源
- 谷歌地图劫持了iphone's滚动(触摸事件)-如何恢复
- 在D3.js中,有没有任何方法可以将x和y方向上的滚动事件绑定到平移svg
- jquery/ajax无限滚动事件
- 如何检测滚动事件是否像在触摸设备上一样只触发一次
- 如何查明鼠标按下事件是否发生在滚动条上或元素中的其他任何位置
- 为什么不'我的窗口滚动事件根本没有启动.其他答案没有解决问题
- 在滚动时,在隐藏滚动条和隐藏溢出的同时触发事件
- 如何用javascript调用函数,然后在滚动事件中调用该函数的特定实例
- 将事件列表滚动到给定月份的第一个事件
- '滚动'事件未在CompositeView中激发
- 从父元素取消绑定滚动事件并绑定到子元素
- JavaScript/jQuery未触发滚动事件
- 如何使用javascript检测不可滚动元素中的滚动事件和方向
- Javascript鼠标滚轮事件滚动
- 点击未触发溢出事件:滚动
- 将jquery事件滚动与“;在“上”;
- actionscript 3-as3中的鼠标事件滚动flash和html.有没有办法停止使用javascript
- jquery和事件滚动