Dostosowywanie wtyczki myszy jQuery

Question

Mam suwak w trybie pełnoekranowym i chcę włączyć nawigację za pomocą kółka myszy. Aby wykryć zdarzenie z kółkiem myszy, pomyślałem, że wtyczka jQuery mousewheel powinna być najlepszą opcją.

Jestem w stanie uwzględnić to i funkcje ognia. Ale nie jestem w stanie (i nie znalazłem żadnych zasobów), aby skonfigurować go tak, jak chcę.

Chcę sprawdzić dla określonej liczby przewijanych pikseli. Tak więc, jeśli na przykład kółko myszy spróbuje przewinąć 20px up, chcę uruchomić funkcję lub 20px down dla innej funkcji.

​$(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 (Przewijanie góra/dół)

Answer 1

Jeśli rozumiem Twojego problemu poprawnie, widzisz ogień zdarzeń zbyt często. Problem polega na tym, że w przypadku każdej danej czynności przewijania zdarzenie uruchamia się kilka razy. Możesz to zobaczyć, jeśli otworzysz konsolę programisty w przeglądarce i wykonasz numer console.log(e.originalEvent.wheelDelta). Może to spowodować złamanie dużego zwoju w kilku małych wydarzeniach przewijania, odrzucając pożądane zachowanie. Sposób, w jaki traktowane to było użyć zmiennej trzymać deltę przewijania:

$(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!'); 
     } 
    }); 
}); 

Następnie można usunąć deltę przewijania po górę lub w dół alarmowych pożarów.

JS Fiddle

Można też zwiększyć próbę ponad 20 pikseli, jak większość przewija zadziała to wydarzenie - 20 pikseli wynosi tylko około 1/4 cala.

Nadzieję, że pomaga. Jeśli to nie rozwiąże problemu, możesz skomentować, gdzie popełniłem błąd. Powodzenia!

---

Aktualizacja adresu komentarza:

Można czekać, aż przewijania zatrzymuje się przez ustawienie limitu czasu, które będą czekać krótki czas (250 ms w tym przykładzie) po przewinięciu przestał wykonywania. Przeniosłem logiki wewnątrz tego limitu czasu tak, że będzie ona działać dopiero po zatrzymaniu przewijania:

$(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); 
    }); 
}); 

Updated JS Fiddle