Mausrad-Ereignisse in jQuery abrufen?

Question 1

Gibt es eine Möglichkeit, die Mausrad-Ereignisse (nicht die Rede von scroll Ereignisse) in jQuery?

Question 2

$(document).ready(function(){
    $('#foo').bind('mousewheel', function(e){
        if(e.originalEvent.wheelDelta /120 > 0) {
            console.log('scrolling up !');
        }
        else{
            console.log('scrolling down !');
        }
    });
});

Question 3

Bindung an beide mousewheel und DOMMouseScroll hat bei mir am Ende sehr gut funktioniert:

$(window).bind('mousewheel DOMMouseScroll', function(event){
    if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
        // scroll up
    }
    else {
        // scroll down
    }
});

Diese Methode funktioniert in IE9+, Chrome 33 und Firefox 27.

Bearbeiten – März 2016

Ich habe mich entschieden, dieses Thema erneut zu behandeln, da es eine Weile her ist. Die MDN-Seite für das Scroll-Ereignis bietet eine großartige Möglichkeit, die verwendete Scroll-Position abzurufen requestAnimationFrame, was meiner vorherigen Erkennungsmethode sehr vorzuziehen ist. Ich habe ihren Code geändert, um neben der Bildlaufrichtung und -position eine bessere Kompatibilität zu gewährleisten:

(function() {
  var supportOffset = window.pageYOffset !== undefined,
    lastKnownPos = 0,
    ticking = false,
    scrollDir,
    currYPos;

  function doSomething(scrollPos, scrollDir) {
    // Your code goes here...
    console.log('scroll pos: ' + scrollPos + ' | scroll dir: ' + scrollDir);
  }

  window.addEventListener('wheel', function(e) {
    currYPos = supportOffset ? window.pageYOffset : document.body.scrollTop;
    scrollDir = lastKnownPos > currYPos ? 'up' : 'down';
    lastKnownPos = currYPos;

    if (!ticking) {
      window.requestAnimationFrame(function() {
        doSomething(lastKnownPos, scrollDir);
        ticking = false;
      });
    }
    ticking = true;
  });
})();

Siehe den Stift Vanilla JS Scroll-Tracking von Jesse Dupuy (@blindside85) an CodePen.

Dieser Code arbeitet derzeit in Chrome v50, Firefox v44, Safari v9, and IE9+

Verweise:

https://developer.mozilla.org/en-US/docs/Web/Events/scroll

https://developer.mozilla.org/en-US/docs/Web/Events/wheel

Question 4

Ab jetzt im Jahr 2017 können Sie nur noch schreiben

$(window).on('wheel', function(event){

  // deltaY obviously records vertical scroll, deltaX and deltaZ exist too.
  // this condition makes sure it's vertical scrolling that happened
  if(event.originalEvent.deltaY !== 0){

    if(event.originalEvent.deltaY < 0){
      // wheeled up
    }
    else {
      // wheeled down
    }
  }
});

Funktioniert mit aktuellem Firefox 51, Chrome 56, IE9+

Question 5

Da ist ein Plugin die das Aufwärts-/Abwärts-Mausrad und die Geschwindigkeit über einem Bereich erkennt.

Question 6

Antworten, die über das Ereignis “Mausrad” sprechen, beziehen sich auf ein veraltetes Ereignis. Das Standardereignis ist einfach “Rad”. Sehen https://developer.mozilla.org/en-US/docs/Web/Reference/Events/wheel

Question 7

Das hat bei mir funktioniert 🙂

 //Firefox
 $('#elem').bind('DOMMouseScroll', function(e){
     if(e.originalEvent.detail > 0) {
         //scroll down
         console.log('Down');
     }else {
         //scroll up
         console.log('Up');
     }

     //prevent page fom scrolling
     return false;
 });

 //IE, Opera, Safari
 $('#elem').bind('mousewheel', function(e){
     if(e.originalEvent.wheelDelta < 0) {
         //scroll down
         console.log('Down');
     }else {
         //scroll up
         console.log('Up');
     }

     //prevent page fom scrolling
     return false;
 });

vom Stapelüberlauf

Question 8

Hier ist eine Vanille-Lösung. Kann in jQuery verwendet werden, wenn das Ereignis an die Funktion übergeben wird event.originalEvent die jQuery als Property des jQuery-Events zur Verfügung stellt. Oder wenn innerhalb der callback Funktion unter fügen wir vor der ersten Zeile hinzu: event = event.originalEvent;.

Dieser Code normalisiert die Radgeschwindigkeit/Menge und ist positiv für das, was bei einer typischen Maus ein Vorwärtsscrollen wäre, und negativ bei einer Rückwärtsbewegung des Mausrads.

Demo: http://jsfiddle.net/BXhzD/

var wheel = document.getElementById('wheel');

function report(ammout) {
    wheel.innerHTML = 'wheel ammout: ' + ammout;
}

function callback(event) {
    var normalized;
    if (event.wheelDelta) {
        normalized = (event.wheelDelta % 120 - 0) == -0 ? event.wheelDelta / 120 : event.wheelDelta / 12;
    } else {
        var rawAmmount = event.deltaY ? event.deltaY : event.detail;
        normalized = -(rawAmmount % 3 ? rawAmmount * 10 : rawAmmount / 3);
    }
    report(normalized);
}

var event="onwheel" in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
window.addEventListener(event, callback);

Es gibt auch ein Plugin für jQuery, das ausführlicher im Code und etwas mehr Zucker ist: https://github.com/brandonaaron/jquery-mousewheel