Element: wheel Event
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Das wheel
-Ereignis wird ausgelöst, wenn der Benutzer einen Radknopf an einem Zeigegerät (typischerweise einer Maus) dreht. Es wird auch für verwandte Geräte ausgelöst, die Radaktionen simulieren, wie Trackpads und Kugelmäuse.
Dieses Ereignis ersetzt das nicht standardmäßige, veraltete mousewheel
-Ereignis.
Verwechseln Sie das wheel
-Ereignis nicht mit dem scroll
-Ereignis:
- Ein
wheel
-Ereignis löst nicht unbedingt einscroll
-Ereignis aus. Zum Beispiel könnte das Element überhaupt nicht scrollbar sein. Auch Zoomaktionen über das Rad oder Trackpad lösenwheel
-Ereignisse aus. - Ein
scroll
-Ereignis wird nicht unbedingt durch einwheel
-Ereignis ausgelöst. Elemente können auch durch die Verwendung der Tastatur, das Ziehen eines Scrollbalkens oder die Nutzung von JavaScript gescrollt werden. - Selbst wenn das
wheel
-Ereignis ein Scrollen auslöst, spiegeln diedelta*
-Werte imwheel
-Ereignis nicht unbedingt die Scrollrichtung des Inhalts wider.
Daher sollten Sie sich nicht auf die delta*
-Eigenschaften des wheel
-Ereignisses verlassen, um die Scrollrichtung zu ermitteln. Stattdessen sollten Sie Wertänderungen von scrollLeft
und scrollTop
des Ziels im scroll
-Ereignis erfassen.
Das wheel
-Ereignis kann abgebrochen werden. Wenn das Ereignis abgebrochen wird, erfolgt kein Scrollen oder Zoomen. Dies kann zu Leistungsproblemen führen, da der Browser bei jedem wheel
-Ereignis warten muss, bis dieses verarbeitet ist, bevor der Inhalt tatsächlich gescrollt wird. Sie können dies vermeiden, indem Sie passive: true
setzen, wenn Sie addEventListener()
aufrufen, was dazu führen kann, dass der Browser nicht abbrechbare wheel
-Ereignisse generiert.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener()
oder setzen Sie eine Ereignisbehandlereigenschaft.
addEventListener("wheel", (event) => {});
onwheel = (event) => {};
Ereignistyp
Ein WheelEvent
. Erbt von MouseEvent
, UIEvent
und Event
.
Ereigniseigenschaften
Diese Schnittstelle erbt Eigenschaften von ihren Vorfahren, MouseEvent
, UIEvent
und Event
.
WheelEvent.deltaX
Nur lesbar-
Gibt einen
double
zurück, der die horizontale Scrollmenge darstellt. WheelEvent.deltaY
Nur lesbar-
Gibt einen
double
zurück, der die vertikale Scrollmenge darstellt. WheelEvent.deltaZ
Nur lesbar-
Gibt einen
double
zurück, der die Scrollmenge für die z-Achse darstellt. WheelEvent.deltaMode
Nur lesbar-
Gibt ein
unsigned long
zurück, das die Einheit derdelta*
-Werte der Scrollmenge darstellt. Erlaubte Werte sind:Konstante Wert Beschreibung WheelEvent.DOM_DELTA_PIXEL
0x00
Die delta*
-Werte sind in Pixeln angegeben.WheelEvent.DOM_DELTA_LINE
0x01
Die delta*
-Werte sind in Zeilen angegeben. Jeder Mausklick scrollt eine Zeile des Inhalts, wobei die Methode zur Berechnung der Zeilenhöhe browserabhängig ist.WheelEvent.DOM_DELTA_PAGE
0x02
Die delta*
-Werte sind in Seiten angegeben. Jeder Mausklick scrollt eine Seite des Inhalts. WheelEvent.wheelDelta
Nur lesbar Veraltet-
Gibt einen Ganzzahlwert (32-Bit) zurück, der die Entfernung in Pixeln darstellt.
WheelEvent.wheelDeltaX
Nur lesbar Veraltet-
Gibt einen Ganzzahlwert zurück, der die horizontale Scrollmenge darstellt.
WheelEvent.wheelDeltaY
Nur lesbar Veraltet-
Gibt einen Ganzzahlwert zurück, der die vertikale Scrollmenge darstellt.
Beispiele
Skalieren eines Elements über das Mausrad
Dieses Beispiel zeigt, wie man ein Element mit dem Mausrad (oder einem anderen Zeigegerät) skaliert.
<div>Scale me with your mouse wheel.</div>
body {
min-height: 100vh;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
div {
width: 105px;
height: 105px;
background: #cdf;
padding: 5px;
}
function zoom(event) {
event.preventDefault();
scale += event.deltaY * -0.01;
// Restrict scale
scale = Math.min(Math.max(0.125, scale), 4);
// Apply scale transform
el.style.transform = `scale(${scale})`;
}
let scale = 1;
const el = document.querySelector("div");
el.onwheel = zoom;
addEventListener-Äquivalent
Der Ereignisbehandler kann auch mit der Methode addEventListener()
eingerichtet werden:
el.addEventListener("wheel", zoom, { passive: false });
Spezifikationen
Specification |
---|
UI Events # event-type-wheel |
HTML Standard # handler-onwheel |
Browser-Kompatibilität
BCD tables only load in the browser