jQuery Mausrad Plugin Anpassung

Question

Ich habe einen Vollbild-Schieberegler und möchte die Navigation mit einem Mausrad aktivieren. Um ein Mausrad Ereignis zu erkennen, dachte ich das jQuery mousewheel Plugin sollte die beste Option sein.

Ich bin in der Lage, es aufzunehmen und Funktionen zu feuern. Aber ich bin nicht in der Lage (und habe keine Ressourcen gefunden), es so zu konfigurieren, wie ich es möchte.

Ich möchte nach einer bestimmten Anzahl von gescrollten Pixeln suchen. Also, wenn zum Beispiel das Mausrad versucht, 20px up zu scrollen, möchte ich eine Funktion auslösen, oder 20px down für eine andere Funktion.

​$(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 (oben/unten blättern)

Answer 1

Wenn ich dein Problem richtig verstehe, sind Sie zu oft die Ereignisse Feuer zu sehen. Das Problem hierbei ist, dass das Ereignis für eine bestimmte Scroll-Aktion mehrmals ausgelöst wird. Sie können dies sehen, wenn Sie die Entwicklerkonsole in Ihrem Browser öffnen und eine console.log(e.originalEvent.wheelDelta) ausführen. Dies kann einen großen Bildlauf in mehrere kleine Bildlaufereignisse zerlegen und Ihr gewünschtes Verhalten abstoßen. So wie ich die gehandhabt wurde, eine Variable zu verwenden, um das Scroll-Delta zu halten:

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

Sie können dann entweder nach oben oder nach unten Alarm ausgelöst das Scroll-Delta löschen.

JS Fiddle

Sie können auch Ihren Test mehr als 20 Pixel zu erhöhen, da die meisten scrollt dieses Ereignis ausgelöst wird - 20 Pixel ist nur etwa 1/4 Zoll.

Hoffe, dass hilft. Wenn das Ihr Problem nicht behebt, können Sie gerne kommentieren, wo ich falsch gelaufen bin. Viel Glück!

---

Update-Adresse Kommentar:

können Sie warten, bis die Scroll stoppt durch einen Timeout-Einstellung, die eine kurze Zeit (250 ms in diesem Beispiel) nach Scrollen Ausführung gestoppt warten. Ich zog die Logik innerhalb dieser Timeout, so dass es erst nach Scrollen gestoppt hat laufen:

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

JS Fiddle Aktualisiert