personalizzazione del plugin per rotellina del mouse jQuery

Question

Ho un cursore a schermo intero e desidero abilitare la navigazione utilizzando una rotellina del mouse. Per rilevare un evento rotellina del mouse ho pensato che il plugin jQuery mousewheel dovrebbe essere l'opzione migliore.

Sono in grado di includerlo e funzioni di fuoco. Ma non sono in grado (e non ho trovato risorse) per configurarlo nel modo che voglio.

Voglio controllare una certa quantità di pixel a scorrimento. Quindi, se per esempio, la rotellina del mouse tenta di scorrere 20px up, voglio attivare una funzione, oppure 20px down per un'altra funzione.

​$(document).ready(function(){ 
    $('body').bind('mousewheel', function(e){ 
     if(e.originalEvent.wheelDelta /120 > 0) { 
      alert('Wait! I fire way too often!'); 
     } 
     else{ 
      alert('We are going down, way too msuch alerts!'); 
     } 
    }); 
}); 

JS FIDDLE (scorrere su/giù)

Answer 1

Se ho ben capito il problema in modo corretto, si sta vedendo il fuoco gli eventi troppo spesso. Il problema qui è che per qualsiasi azione di scorrimento, l'evento viene attivato più volte. Puoi vedere questo se apri la console per sviluppatori nel tuo browser e fai un console.log(e.originalEvent.wheelDelta). Questo può interrompere una grande scroll in diversi piccoli eventi di scroll, eliminando il comportamento desiderato. Il modo in cui ho trattato questo è stato quello di utilizzare una variabile per contenere il delta di scorrimento:

$(document).ready(function(){ 
    var scrollPixels = 0; // variable to store scroll delta 

    $('body').bind('mousewheel', function(e){ 
     // increment/decrement scroll delta 
     scrollPixels += e.originalEvent.wheelDelta; 
     console.log(scrollPixels); 

     if (scrollPixels < -20) { 
      scrollPixels = 0; // clear scroll delta 
      alert('Coming down!'); 
     } 
     else if (scrollPixels > 20){ 
      scrollPixels = 0; // clear scroll delta 
      alert('Coming up!'); 
     } 
    }); 
}); 

È possibile quindi cancellare il delta di scorrimento dopo l'alto o verso il basso incendi di allarme.

JS Fiddle

Si consiglia inoltre di aumentare il test a più di 20 pixel, come la maggior parte delle pergamene spareranno questo evento - 20 pixel è solo circa 1/4 di pollice.

Spero che questo aiuti. Se ciò non risolve il problema, non esitare a commentare dove ho sbagliato. Buona fortuna!

---

aggiornamento per risolvere commento:

È possibile attendere che il rotolo si ferma impostando un timeout che attendere un breve lasso di tempo (250 ms in questo esempio), dopo lo scorrimento si è interrotto l'esecuzione. Ho spostato la logica all'interno di questo timeout in modo che venga eseguito solo dopo che lo scorrimento si è fermato:

$(document).ready(function(){ 
    var scrollPixels = 0; // variable to store scroll delta 
    var scrolling; // timeout function var 

    $('body').bind('mousewheel', function(e){ 
     // increment/decrement scroll delta 
     scrollPixels += e.originalEvent.wheelDelta; 
     console.log(scrollPixels); 

     clearTimeout(scrolling); 
     scrolling = setTimeout(function() { 
     console.log('stop wheeling! ', scrollPixels); 
     scrolling = undefined; 

     if (scrollPixels < -300) { 
      scrollPixels = 0; // clear scroll delta 
      alert('Coming down!'); 
     } 
     else if (scrollPixels > 300){ 
      scrollPixels = 0; // clear scroll delta 
      alert('Coming up!'); 
     } 

    }, 250); 
    }); 
}); 

Aggiornato JS Fiddle