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, nure.deltaY
ist in verschiedenen Browsern, so dass die Geschwindigkeit unterscheidet sich. (Warnung: trippy!)
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich würde vorschlagen, dass alle drei von Ihnen werden zur gleichen Zeit verwendet, um alle Browser.
Hinweise:
In Versionen von Firefox, wo sowohl die
wheel
undDOMMouseScroll
Ereignisse werden unterstützt, müssen wir einen Weg finden, um den browser anweisen, dass er nur ausgeführtwheel
und nicht beide. So etwas wie die folgenden:if ("onwheel" in window) ...
Den oben prüfen, obwohl, im Falle von
IE9
undIE10
fehl, denn obwohl diese Browser unterstützen diewheel
Ereignis, das Sie nicht dieonwheel
Attribut in den DOM-Elemente. Zu begegnen, die wir verwenden können, eine Flagge, wie später gezeigt auf.Glaube ich, dass die zurückgegebene Anzahl von
e.deltaY
,e.wheelDelta
unde.detail
ist nicht nützlich, andere als zu helfen, die uns bestimmen Sie die Richtung des scrollen, so in der Lösung unten-1
und1
zurückgegeben werden.Snippet:
JS:
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. ?
wheel
Ereignis zwischen verschiedenen event ruft @avatarofhope2.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?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 diewheel
event nicht unterstützt wird, wird das flag wird nie gesetzt werden, umtrue
, so dass die anderen Veranstaltungen laufen die handler, die jeweils in Ihren jeweiligen Browsern @PhilTune.Können Sie die Funktion erkennen, RADAUFHäNGUNG wie diese:
dann können Sie Ihre Ereignisprozedur so:
oder wenn Sie mit vanilla js:
Referenz:
https://developer.mozilla.org/en-US/docs/Web/Events/wheel
wheel
- Ereignis nicht, haben Sie dieonwheel
- Attribut auf DOM-Elemente."onwheel" in document.createElement("div")
, weil dieonwheel
- Attribut wird nicht unterstützt, auf DOM-Elemente in diesen Browsern. Hoffe es hilft ☺️