Si je veux lier un événement sur une page en défilement, je peux utiliser scroll();
.
Mais comment tirer quand scroll()
est fini?
Je voudrais reproduire ceci:
$(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
});
des idées?
$.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));
});
};
Après 250 ms à partir du dernier événement de défilement, cela appellera le rappel "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/
les paramètres clearTimeout et clearInterval n'ont pas besoin d'être définis et peuvent même être des types incorrects ou même omis.
l'événement lui-même n'existe pas car scroll est un événement unique déclenché à chaque fois que l'utilisateur fait défiler d'un incrément donné.
Ce que vous pouvez cependant faire, c'est imiter l'événement.
Nous remercions James Padolsey pour cela, extrait de sa page Web: Lisez-le ici pour bien comprendre le code et son implémentation.
http://james.padolsey.com/javascript/special-scroll-events-for-jquery/
(une fonction(){
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) ); } }; })();
Il convient probablement de noter qu’il ya plusieurs questions en rapport avec la vôtre, ce qui pourrait donc faire double emploi. par exemple. Javascript: effectuer une action après le défilement de l'utilisateur et événement Fire après le défilement des barres de défilement ou la molette de la souris avec javascript
Vous pouvez vérifier si window.scrollY == 0
$(window).scroll(function(){
if (window.scrollY == 0) {
//...
}
});
Mais cet événement sera tiré à chaque rouleau.
Je préfère pouvoir écouter un événement. C'est ce que je fais:
Le 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);
};
}($);
Dans ce cas, la fenêtre déclenchera maintenant un événement scrollStop
$(window).scrollStopEventEmitter($);
Maintenant je peux écouter sur scrollStop
$(window).on('scrollStop',function(){
// code