Mausrad -, Rad-und DOMMouseScroll in JavaScript

DOMMouseScroll funktioniert nur bei Firefox.

wheel scheint zu funktionieren für Firefox und chrome. Was ist das? Nicht gefunden habe docs auf diese ein.

mousewheel arbeitet nicht für Firefox.

Wie sollte ich Sie einsetzen, um beste browser-Kompatibilität.

Beispiel gegeben:

document.addEventListener('ScrollEvent', function(e){
   DoSomething();
});
  • "scroll" wie das Ereignis funktioniert bei mir in Chrome & Firefox, sind Sie auf der Suche nach besonders Ziel mit der Maus Rad-und ignorieren das scrollen über die scrollbar?
  • wheel "sollte" zu arbeiten. im atm in Sie suchen, warum es nicht funktioniert ;_;
  • Die wheel Veranstaltung auf MDN => Cross-browser-Implementierung
  • jsfiddle.net/ecP6R/2 wheel funktioniert, nur e.deltaY ist in verschiedenen Browsern, so dass die Geschwindigkeit unterscheidet sich. (Warnung: trippy!)
InformationsquelleAutor enzian | 2014-08-08
  1. 19

    Ich würde vorschlagen, dass alle drei von Ihnen werden zur gleichen Zeit verwendet, um alle Browser.

    Hinweise:

    1. In Versionen von Firefox, wo sowohl die wheel und DOMMouseScroll Ereignisse werden unterstützt, müssen wir einen Weg finden, um den browser anweisen, dass er nur ausgeführt wheel und nicht beide. So etwas wie die folgenden:if ("onwheel" in window) ...

    2. Den oben prüfen, obwohl, im Falle von IE9 und IE10 fehl, denn obwohl diese Browser unterstützen die wheel Ereignis, das Sie nicht die onwheel Attribut in den DOM-Elemente. Zu begegnen, die wir verwenden können, eine Flagge, wie später gezeigt auf.

    3. Glaube ich, dass die zurückgegebene Anzahl von e.deltaY, e.wheelDelta und e.detail ist nicht nützlich, andere als zu helfen, die uns bestimmen Sie die Richtung des scrollen, so in der Lösung unten -1 und 1 zurückgegeben werden.

    Snippet:

    JS:

    /* The flag that determines whether the wheel event is supported. */
var supportsWheel = false;

/* The function that will run when the events are triggered. */
function DoSomething (e) {
  /* Check whether the wheel event is supported. */
  if (e.type == "wheel") supportsWheel = true;
  else if (supportsWheel) return;

  /* Determine the direction of the scroll (< 0 → up, > 0 → down). */
  var delta = ((e.deltaY || -e.wheelDelta || e.detail) >> 10) || 1;

  /* ... */
  console.log(delta);
}

/* Add the event listeners for each event. */
document.addEventListener('wheel', DoSomething);
document.addEventListener('mousewheel', DoSomething);
document.addEventListener('DOMMouseScroll', DoSomething);

    Obwohl fast 3 Jahre sind vergangen seit der Veröffentlichung von der Frage, ich glaube, Menschen, die stolpern, es in der Zukunft profitieren werden von dieser Antwort, so fühlen sich frei zu schlagen/Verbesserungen vorzunehmen, um es. ?

    • Zu mehr Informationen, wenn Sie mit dem Rad Ereignis-listener, die sowohl firefox und chrome das Feuer aus dieser Veranstaltung, aber eine, die Ergebnisse in eine WheelEvent, und die anderen Ergebnisse in einem DOMMouseScroll wird an den Rückruf übergeben wird. Die DoSomething-Funktion aufgerufen wird zweimal hier. es wird aufgerufen, sobald für die Rad-listener und einmal für die anderen browser-spezifische Zuhörer. die Kontrolle an der Spitze verwendet eine Globale variable zu verfolgen, aber dies ist nicht der beste Weg, um wirklich etwas zu tun, da Sie nur etwas tun, einmal.
    • In dem aktuellen Fall, über eine Globale variable ist der beste Weg,, da wir müssen einmal überprüfen. Es ist nicht wie ein browser wird plötzlich beginnen, die Unterstützung der wheel Ereignis zwischen verschiedenen event ruft @avatarofhope2.
    • Ich bin mir nicht sicher, was else if (supportsWheel) return; ist für. Die Art, wie es geschrieben steht, dass wird nie wieder zurückkehren. Was machen diese beiden Zeilen tun sollen?
    • Wenn die wheel Veranstaltung wird unterstützt, wollen wir nicht die beiden anderen Ereignisse, die zum ausführen der event-handler wieder, so verwenden wir die Flagge zum beenden der Funktion früh. Wenn die wheel event nicht unterstützt wird, wird das flag wird nie gesetzt werden, um true, so dass die anderen Veranstaltungen laufen die handler, die jeweils in Ihren jeweiligen Browsern @PhilTune.
    InformationsquelleAutor Angel Politis
  2. 0

    Können Sie die Funktion erkennen, RADAUFHäNGUNG wie diese:

    var wheelEvt = "onwheel" in document.createElement("div") ? "wheel" : //    Modern browsers support "wheel"
          document.onmousewheel !== undefined ? "mousewheel" : //Webkit and IE support at least "mousewheel"
          "DOMMouseScroll"; //let's assume that remaining browsers are older Firefox

    dann können Sie Ihre Ereignisprozedur so:

    $("#wrapper").on(wheelEvt, function(e) {
console.log(e.deltaY);
if (e.deltaY > 0) {
    $("#Left").click();
} else if (e.deltaY <= 0) {
    $("#Right").click();
}
});

    oder wenn Sie mit vanilla js:

    document.getElementById("wrapper").addEventListener(wheelEvt, function(e) {
console.log(e.deltaY);
if (e.deltaY > 0) {
    $("#Left").click();
} else if (e.deltaY <= 0) {
    $("#Right").click();
}
}, false);

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

    • Diese funktioniert nicht für IE9 und IE10, die, trotz der Unterstützung der wheel - Ereignis nicht, haben Sie die onwheel - Attribut auf DOM-Elemente.
    • Ich habe keinen IE9 oder IE10 zu testen, jetzt, aber ich habe einen Verweis von MDN, die besagt, dass es nicht schon onwheel. Hier ist eine andere, weniger maßgebliche Ressource: w3schools.com/jsref/event_onwheel.asp Kannst du bitte den Nachweis erbringen, funktioniert es nicht?
    • Überprüfen Sie heraus den Hinweis unter Browser-Unterstützung in die Ressource, die Sie im Zusammenhang mit oben. Außerdem finden Sie einen Bericht über das Thema in IE9 und IE10 hier. Sowieso, die Frage ist hier: "onwheel" in document.createElement("div"), weil die onwheel - Attribut wird nicht unterstützt, auf DOM-Elemente in diesen Browsern. Hoffe es hilft ☺️
    InformationsquelleAutor arakno
Schreibe einen Kommentar