Element: wheel Event

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 ein scroll-Ereignis aus. Zum Beispiel könnte das Element überhaupt nicht scrollbar sein. Auch Zoomaktionen über das Rad oder Trackpad lösen wheel-Ereignisse aus.
Ein scroll-Ereignis wird nicht unbedingt durch ein wheel-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 die delta*-Werte im wheel-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 der delta*-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.

html

<div>Scale me with your mouse wheel.</div>

css

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

Siehe auch

WheelEvent