Mausrad-Ereignisse in jQuery abrufen?

Gibt es eine Möglichkeit, die Mausrad-Ereignisse (ohne über scrollEreignisse zu sprechen ) in jQuery abzurufen?

Es gibt ein Plugin , das das Mausrad nach oben / unten und die Geschwindigkeit über eine Region erkennt.

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

Ich habe mich an beide gebunden mousewheelund DOMMouseScrollam Ende sehr gut für mich gearbeitet:

$(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 entschlossen, dieses Problem erneut zu behandeln, da es eine Weile her ist. Die MDN-Seite für das Bildlaufereignis bietet eine hervorragende Möglichkeit, die verwendete Bildlaufposition abzurufen requestAnimationFrame, was meiner vorherigen Erkennungsmethode sehr vorzuziehen ist. Ich habe ihren Code geändert, um neben Bildlaufrichtung und -position eine bessere Kompatibilität zu bieten:

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

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

Ab 2017 können Sie einfach schreiben

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

  // deltaY obviously records vertical scroll, deltaX and deltaZ exist too
  if(event.originalEvent.deltaY < 0){
    // wheeled up
  }
  else {
    // wheeled down
  }
});

Funktioniert mit aktuellem Firefox 51, Chrome 56, IE9 +

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

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

Hier ist eine Vanillelösung. Kann in jQuery verwendet werden, wenn das an die Funktion übergebene Ereignis das ist, event.originalEventdas jQuery als Eigenschaft des jQuery-Ereignisses zur Verfügung stellt. Oder wenn callbackwir innerhalb der Funktion unter vor der ersten Zeile hinzufügen : event = event.originalEvent;.

Dieser Code normalisiert die Radgeschwindigkeit / -menge und ist positiv für einen Vorwärtslauf bei einer typischen Maus und negativ für eine 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

Dies funktioniert in den neuesten Versionen von IE, Firefox und Chrome.

$(document).ready(function(){
        $('#whole').bind('DOMMouseScroll mousewheel', function(e){
            if(e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
                alert("up");
            }
            else{
                alert("down");
            }
        });
    });

Ich steckte heute in dieser Ausgabe fest und stellte fest, dass dieser Code für mich gut funktioniert

$('#content').on('mousewheel', function(event) {
    //console.log(event.deltaX, event.deltaY, event.deltaFactor);
    if(event.deltaY > 0) {
      console.log('scroll up');
    } else {
      console.log('scroll down');
    }
});

Verwenden Sie diesen Code

 knob.bind('mousewheel', function(e){  
 if(e.originalEvent.wheelDelta < 0) {
    moveKnob('down');
  } else {
    moveKnob('up');
 }
  return false;
});

Meine Kombination sieht so aus. Es wird bei jedem Bildlauf nach unten / oben ausgeblendet und eingeblendet. Andernfalls müssen Sie zum Header scrollen, um den Header einzufügen.

var header = $("#header");
$('#content-container').bind('mousewheel', function(e){
    if(e.originalEvent.wheelDelta > 0) {
        if (header.data('faded')) {
            header.data('faded', 0).stop(true).fadeTo(800, 1);
        }
    }
    else{
        if (!header.data('faded')) header.data('faded', 1).stop(true).fadeTo(800, 0);
    }
});

Das obige ist nicht für Touch / Mobile optimiert. Ich denke, dieses macht es besser für alle Handys:

var iScrollPos = 0;
var header = $("#header");
$('#content-container').scroll(function () {

    var iCurScrollPos = $(this).scrollTop();
    if (iCurScrollPos > iScrollPos) {
        if (!header.data('faded')) header.data('faded', 1).stop(true).fadeTo(800, 0);

    } else {
        //Scrolling Up
        if (header.data('faded')) {
            header.data('faded', 0).stop(true).fadeTo(800, 1);
        }
    }
    iScrollPos = iCurScrollPos;

});

Das Plugin , dass @DarinDimitrov geschrieben, jquery-mousewheel, mit jQuery 3+ gebrochen . Es ist ratsamer zu verwenden, jquery-wheelwas mit jQuery 3+ funktioniert.

Wenn Sie nicht auf die jQuery-Route gehen möchten, rät MDN dringend dazu, das mousewheelEreignis zu verwenden, da es nicht dem Standard entspricht und an vielen Stellen nicht unterstützt wird. Stattdessen heißt es, dass Sie das wheelEreignis verwenden sollten, da Sie viel genauer wissen, was die Werte bedeuten, die Sie erhalten. Es wird von den meisten gängigen Browsern unterstützt.

Wenn Sie das erwähnte jquery-Mausrad-Plugin verwenden , verwenden Sie dann das zweite Argument der Event-Handler-Funktion delta:

$('#my-element').on('mousewheel', function(event, delta) {
    if(delta > 0) {
    console.log('scroll up');
    } 
    else {
    console.log('scroll down');
    }
});

Ich habe vor kurzem das gleiche Problem bekommen, wo ich $(window).mousewheelzurückkamundefined

Was ich getan habe war $(window).on('mousewheel', function() {});

Um es weiter zu verarbeiten, benutze ich:

function (event) {
    var direction = null,
        key;

    if (event.type === 'mousewheel') {
        if (yourFunctionForGetMouseWheelDirection(event) > 0) {
            direction = 'up';
        } else {
            direction = 'down';
        }
    }
}