Mausrad-Ereignisse in jQuery abrufen?

130

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

thejh
quelle
1
Eine schnelle Suche ergab dieses Plugin , das helfen kann.
Jerad Rose
Diese Lösung funktioniert für mich: stackoverflow.com/questions/7154967/jquery-detect-scrolldown
Bertie
@thejh hat eine neue Antwort auf diese Frage mit DOM3-Ereignissen gepostet
Sergio
Mögliches Duplikat von jQuery scroll ()
erkennt
Nur eine Anmerkung dazu. Wenn Sie nur Änderungen an einer Eingabe erkennen möchten und diese nicht über das Mausrad $(el).on('input', ...
erkannt werden

Antworten:

46

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

Darin Dimitrov
quelle
35
Plugin? Komm schon .. überprüfe die Antwort unten, auf die du verzichten kannst
201
$(document).ready(function(){
    $('#foo').bind('mousewheel', function(e){
        if(e.originalEvent.wheelDelta /120 > 0) {
            console.log('scrolling up !');
        }
        else{
            console.log('scrolling down !');
        }
    });
});
Mahdi Shahbazi
quelle
51
Das DOMMouseScrollEreignis wird in FF verwendet, daher müssen Sie beide .bind('DOMMouseScroll mousewheel') {evetns developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/…
mrzmyr
9
e.originalEvent.wheelDeltaist undefiniert in FF23
hofnarwillie
26
Sie müssen nicht durch 120 teilen, es ist nutzlose Verschwendung von CPU
Venimus
6
muss die beste Antwort gewesen sein
2
Aber warum sollten Sie es durch 120 teilen wollen? Was ist das für eine Konstante? (Sie müssen nicht, wie venimus betonte.)
mshthn
145

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

Sehen Sie sich das Pen Vanilla JS Scroll Tracking von Jesse Dupuy ( @ blindside85 ) auf CodePen an .

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

Verweise:

Jesse Dupuy
quelle
Das hat bei mir am besten funktioniert. Dieses Skript wird jedoch pro "Klick" des Scrollrads ausgeführt. Dies kann für einige Skripte überwältigend sein. Gibt es eine Möglichkeit, jedes Bildlaufereignis als eine Instanz zu behandeln, anstatt das Skript per Mausklick auszuführen?
Invot
Nicht speziell. Nach allem, was ich gesehen habe, vermeiden viele Leute entweder das Scrollen-Tracking oder verwenden stattdessen einen Timer (z. B. überprüfen Sie die Position des Benutzers auf der Seite alle x Millisekunden usw.). Wenn es da draußen eine leistungsfähigere Lösung gibt, möchte ich es auf jeden Fall wissen!
Jesse Dupuy
1
Ich habe einen Weg gefunden, dies zu tun: stackoverflow.com/questions/23919035/…
invot
1
Danke für das Update. Können Sie Ihren Code in Ihre Antwort kopieren? Ich weiß nie, ob der Codepen eines Tages ausfallen könnte. Es ist schon mal passiert.
JDB erinnert sich noch an Monica
2
@JesseDupuy, ich würde diese Antwort positiv bewerten, aber Ihre aktualisierte Version funktioniert nicht, wenn das Dokument zur Ansicht passt ("Breite: 100vh; Höhe: 100vh") oder "Überlauf: versteckt;" hat. "window.addEventListener ('scroll', Rückruf)" ist nicht die richtige Antwort auf "window.addEventListener ('Mausrad', Rückruf)".
Daniel
45

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 +

Louis Ameline
quelle
37

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

Brian Di Palma
quelle
20
Ich habe diese ausprobiert und festgestellt: "Rad" funktioniert in Firefox und IE, aber nicht in Chrome. "Mausrad" funktioniert in Chrome und IE, aber nicht in Firefox. "DOMMouseScroll" funktioniert nur in Firefox.
Curtis Yallop
1
Das hat mir viel Zeit gespart. Vielen Dank!
Gustavohenke
3
Es sieht so aus, als hätte Chrome im August 2013 Unterstützung für "Rad" hinzugefügt: code.google.com/p/chromium/issues/detail?id=227454
rstackhouse
2
Safari unterstützt das Rad-Event immer noch nicht.
Thayne
Wie in Ihrer Dokumentation angegeben, wird das wheelEreignis Edge nicht unterstützt, IEwas nicht dasselbe ist. CanIuse
Alex
16

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

Anjith KP
quelle
14

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

Sergio
quelle
8

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");
            }
        });
    });
futuredayv
quelle
5

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');
    }
});
Prafull Sharma
quelle
4

Verwenden Sie diesen Code

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

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;

});
Thomas Hartmann
quelle
0

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.

Coburn
quelle
0

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');
    }
});
Mojo
quelle
-3

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';
        }
    }
}
Szymon Toda
quelle
Sie haben nicht gesagt, was newUtilities.getMouseWheelDirection
ccsakuweb
Es ist außerhalb des Rahmens dieser Frage. Es handelt sich also nicht um eine Website zum Kopieren und Einfügen.
Szymon Toda