If i want to bind an event on page scrolling i can use scroll();
.
如果我想在页面滚动中绑定一个事件,我可以使用scroll();。
But how to fire when scroll()
is ended up?
但是,当卷轴()结束时,如何触发?
I would like to reproduce this:
我想复制这个:
$(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
});
any ideas?
什么好主意吗?
4 个解决方案
#1
34
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));
});
};
After 250 ms from the last scroll event, this will invoke the "scrollStopped" callback.
在上次滚动事件发生250毫秒后,将调用“scrollStopped”回调。
http://jsfiddle.net/wtRrV/256/
http://jsfiddle.net/wtRrV/256/
strange fact
clearTimeout and clearInterval params don't have to be defined and can even be wrong types or even omitted.
clearTimeout和clearInterval params不必定义,甚至可能是错误的类型,甚至可能被忽略。
http://jsfiddle.net/2w5zLwvx/
lodash (even smaller)
function onScrollStopped(domElement, callback) {
domElement.addEventListener('scroll', _.debounce(callback, 250));
}
http://jsfiddle.net/hotw1o2j/
#2
2
the event itself doesn't exist as scroll is a single event fired everytime the user scrolls by a certain increment.
事件本身并不存在,因为每次用户以一定的增量滚动时,都会触发一个事件。
What you can do however is emulate the event.
但是,您可以模仿这个事件。
Credit to James Padolsey for this, lifted from his webpage:. Read it here to fully understand the code and how it is implemented.
这要归功于詹姆斯·帕多尔西(James Padolsey)。请阅读本文,以充分理解代码及其实现方式。
http://james.padolsey.com/javascript/special-scroll-events-for-jquery/
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) ); } }; })();
Probably worth noting that there are several questions related to yours, so this may be a possible duplication. e.g. Javascript: do an action after user is done scrolling and Fire event after scrollling scrollbars or mousewheel with javascript
可能值得注意的是,有几个问题与您有关,所以这可能是重复的。Javascript:在用户完成滚动后执行操作,在滚动滚动滚动条或鼠标滚轮后触发事件
#3
0
You can verify if window.scrollY == 0
您可以验证if窗口。scrollY = = 0
$(window).scroll(function(){
if (window.scrollY == 0) {
//...
}
});
But this event will be fired at every scroll.
但是这个事件会在每一个卷轴上被触发。
#4
0
I prefer to be able to listen on a event. This is what I do:
我更喜欢能听一件事。这就是我所做的:
The jquery plugin:
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);
};
}($);
In this case, window will now trigger scrollStop event
在这种情况下,窗口现在将触发scrollStop事件
$(window).scrollStopEventEmitter($);
Now I can listen on scrollStop
现在我可以在scrollStop上监听了
$(window).on('scrollStop',function(){
// code
#1
34
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));
});
};
After 250 ms from the last scroll event, this will invoke the "scrollStopped" callback.
在上次滚动事件发生250毫秒后,将调用“scrollStopped”回调。
http://jsfiddle.net/wtRrV/256/
http://jsfiddle.net/wtRrV/256/
strange fact
clearTimeout and clearInterval params don't have to be defined and can even be wrong types or even omitted.
clearTimeout和clearInterval params不必定义,甚至可能是错误的类型,甚至可能被忽略。
http://jsfiddle.net/2w5zLwvx/
lodash (even smaller)
function onScrollStopped(domElement, callback) {
domElement.addEventListener('scroll', _.debounce(callback, 250));
}
http://jsfiddle.net/hotw1o2j/
#2
2
the event itself doesn't exist as scroll is a single event fired everytime the user scrolls by a certain increment.
事件本身并不存在,因为每次用户以一定的增量滚动时,都会触发一个事件。
What you can do however is emulate the event.
但是,您可以模仿这个事件。
Credit to James Padolsey for this, lifted from his webpage:. Read it here to fully understand the code and how it is implemented.
这要归功于詹姆斯·帕多尔西(James Padolsey)。请阅读本文,以充分理解代码及其实现方式。
http://james.padolsey.com/javascript/special-scroll-events-for-jquery/
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) ); } }; })();
Probably worth noting that there are several questions related to yours, so this may be a possible duplication. e.g. Javascript: do an action after user is done scrolling and Fire event after scrollling scrollbars or mousewheel with javascript
可能值得注意的是,有几个问题与您有关,所以这可能是重复的。Javascript:在用户完成滚动后执行操作,在滚动滚动滚动条或鼠标滚轮后触发事件
#3
0
You can verify if window.scrollY == 0
您可以验证if窗口。scrollY = = 0
$(window).scroll(function(){
if (window.scrollY == 0) {
//...
}
});
But this event will be fired at every scroll.
但是这个事件会在每一个卷轴上被触发。
#4
0
I prefer to be able to listen on a event. This is what I do:
我更喜欢能听一件事。这就是我所做的:
The jquery plugin:
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);
};
}($);
In this case, window will now trigger scrollStop event
在这种情况下,窗口现在将触发scrollStop事件
$(window).scrollStopEventEmitter($);
Now I can listen on scrollStop
现在我可以在scrollStop上监听了
$(window).on('scrollStop',function(){
// code