Événement lorsque l'utilisateur arrête le défilement

J'aimerais faire de la fantaisie jQuery lorsque l'utilisateur défile la page. Mais je ne sais pas comment résoudre ce problème, puisqu'il n'y a que la méthode scroll ().

Des idées?

Vous pouvez faire en sorte que le scroll() ait un délai d'attente qui soit écrasé chaque fois que l'utilisateur se déplace. De cette façon, quand il s'arrête après une certaine quantité de millisecondes, votre script est exécuté, mais s'il défile pendant ce temps-là, le compteur recommencera et le script attendra jusqu'à ce qu'il se reproduise.

Mettre à jour:

Parce que cette question a réussi à scrollEnd j'ai pensé que je pourrais aussi bien la mettre à jour avec une extension jQuery qui ajoute un événement scrollEnd

 // extension: $.fn.scrollEnd = function(callback, timeout) { $(this).scroll(function(){ var $this = $(this); if ($this.data('scrollTimeout')) { clearTimeout($this.data('scrollTimeout')); } $this.data('scrollTimeout', setTimeout(callback,timeout)); }); }; // how to call it (with a 1000ms timeout): $(window).scrollEnd(function(){ alert('stopped scrolling'); }, 1000); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div style="height: 200vh"> Long div </div> 

Voici un exemple simple utilisant setTimeout pour déclencher une fonction lorsque l'utilisateur arrête le défilement:

 (function() { var timer; $(window).bind('scroll',function () { clearTimeout(timer); timer = setTimeout( refresh , 150 ); }); var refresh = function () { // do stuff console.log('Stopped Scrolling'); }; })(); 

La minuterie est effacée pendant que l'événement de défilement déclenche. Une fois que le défilement s'arrête, la fonction de rafraîchissement est déclenchée.

Voici une autre solution plus générique basée sur les mêmes idées mentionnées:

 var delayedExec = function(after, fn) { var timer; return function() { timer && clearTimeout(timer); timer = setTimeout(fn, after); }; }; var scrollStopper = delayedExec(500, function() { console.log('stopped it'); }); document.getElementById('box').addEventListener('scroll', scrollStopper); 

Pourquoi est-ce si compliqué? Comme le souligne la documentation, ce http://jsfiddle.net/x3s7F/9/ fonctionne!

 $('.frame').scroll(function() { $('.back').hide().fadeIn(100); } 

http://api.jquery.com/scroll/ .


Remarque: L'événement de scroll sur Windows Chrome est différent de tous les autres. Vous devez faire défiler rapidement pour obtenir le même résultat que dans par exemple FF. Regardez https://liebdich.biz/back.min.js la fonction "X".

Quelques résultats de mon how many ms a scroll event :

  • Safari, Mac FF, Mac Chrome: ~ 16 ms un événement.
  • Windows FF: ~ 19ms un événement.
  • Windows Chrome: jusqu'à ~ 130 ms un événement, lors du défilement lent.
  • Internet Explorer: jusqu'à ~ 110 ms d'un événement.

http://jsfiddle.net/TRNCFRMCN/1Lygop32/4/ .

Il n'y a pas d'événement tel que 'scrollEnd'. Je vous recommande de vérifier la valeur retournée par scroll() temps en temps (par exemple, 200 setInterval ) à l'aide de setInterval et d'enregistrer le delta entre la valeur actuelle et la précédente. Si le delta devient nul, vous pouvez l'utiliser comme événement.

J'ai retiré un code à partir d'une pièce rapide que j'ai cobbled ensemble qui fait cela comme un exemple (notez que scroll.chain est un objet contenant deux arrays début et fin qui sont des conteneurs pour les fonctions de rappel). Notez également que j'utilise jQuery et souligné ici.

 $('body').on('scroll', scrollCall); scrollBind('end', callbackFunction); scrollBind('start', callbackFunction); var scrollCall = function(e) { if (scroll.last === false || (Date.now() - scroll.last) <= 500) { scroll.last = Date.now(); if (scroll.timeout !== false) { window.clearTimeout(scroll.timeout); } else { _(scroll.chain.start).each(function(f){ f.call(window, {type: 'start'}, e.event); }); } scroll.timeout = window.setTimeout(self.scrollCall, 550, {callback: true, event: e}); return; } if (e.callback !== undefined) { _(scroll.chain.end).each(function(f){ f.call(window, {type: 'end'}, e.event); }); scroll.last = false; scroll.timeout = false; } }; var scrollBind = function(type, func) { type = type.toLowerCase(); if (_(scroll.chain).has(type)) { if (_(scroll.chain[type]).indexOf(func) === -1) { scroll.chain[type].push(func); return true; } return false; } return false; } 

Il existe des fonctions scrollstart et scrollstop qui font partie de jquery mobile.

Exemple en utilisant scrollstop:

 $(document).on("scrollstop",function(){ alert("Stopped scrolling!"); }); 

J'espère que ça aide quelqu'un.

J'ai eu le besoin d'implémenter onScrollEnd événement discuté entendre aussi. L'idée d'utiliser timer fonctionne pour moi.

Je l'implique en utilisant JavaScript Module Pattern :

 var WindowCustomEventsModule = (function(){ var _scrollEndTimeout = 30; var _delayedExec = function(callback){ var timer; return function(){ timer && clearTimeout(timer); timer = setTimeout(callback, _scrollEndTimeout); } }; var onScrollEnd = function(callback) { window.addEventListener('scroll', _delayedExec(callback), false); }; return { onScrollEnd: onScrollEnd } })(); // usage example WindowCustomEventsModule.onScrollEnd(function(){ // // do stuff // }); 

J'espère que cela aidera / inspirera quelqu'un