Evento di incendio dopo scrollbar scrollbar o rotellina del mouse con javascript

Vorrei sapere se è ansible triggersre un evento dopo lo scorrimento di una pagina, quando si utilizza la barra di scorrimento o la rotellina del mouse (o con uno scorrimento su un dispositivo touch).

Fondamentalmente, mi piacerebbe rilevare quando l’utente ha smesso di scorrere, quindi posso caricare AJAX, piuttosto che caricarlo durante lo scorrimento.

Sembra che .scroll() jQuery's .scroll() sparando ogni volta che un utente scorre, e sembra clunky avere sempre un evento in fiamme. Esiste qualcosa come .onScrollAfter() , anche su .onMouseUp() ?

Mi piacerebbe sapere se questo è ansible (o se esiste già una funzione) senza usare un framework, anche se ne prenderei in considerazione uno; specialmente jQuery .

Questo evento non esiste. Puoi emularlo usando i timeout:

Esempio (codice di concetto):

 (function() { var timer; /* Basic "listener" */ function scroll_finish(ev) { clearTimeout(timer); timer = setTimeout(scroll_finished, 200, ev); //200ms. Too small = triggered too fast. Too high = reliable, but slow } window.onscroll = scroll_finish; // Or addEventListener, it's just a demo // Fire "events" var thingey = []; function scroll_finished(ev) { // Function logic for (var i=0; i 

Ho pensato di aggiungere questa come risposta anche se è vecchia. L’evento che stai cercando di ricreare credo sia sinonimo di debounce . Questo è disponibile in underscore.js

debounce_.debounce (function, wait, [immediate]) Crea e restituisce una nuova versione debounced della funzione passata che rimanderà l’esecuzione fino a dopo che sono trascorsi millisecondi dall’ultima volta in cui è stato richiamato. Utile per implementare un comportamento che dovrebbe avvenire solo dopo che l’input ha smesso di arrivare. Ad esempio: rendering di un’anteprima di un commento Markdown, ricalcolo di un layout dopo che la finestra ha smesso di essere ridimensionata e così via.

Quindi attenderà dopo la tua ultima esecuzione dell’evento specifico. se non vuoi un ritardo, puoi semplicemente specificare 0. David Walsh ha un’implementazione molto carina che puoi includere in qualsiasi progetto.

 function debounce(func, wait, immediate) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if (!immediate) func.apply(context, args); }; var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply(context, args); }; }; 

Che puoi andare avanti aggiungendo facendo

 var myEfficientFn = debounce(function() { // All the taxing stuff you do }, 250); window.addEventListener('scroll', myEfficientFn); 

Descrizione

Puoi usare il simpatico plugin jQuery Eventi speciali di scorrimento per jQuery di James Padoley .

Funziona davvero bene.

Controlla la pagina e questa dimostrazione jsFiddle ( fai clic su );))

Maggiori informazioni

  • Eventi speciali di scorrimento per jQuery
  • Dimostrazione di jsFiddle