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 tritt auf, wenn der Benutzer eine Rad-Taste an einem Zeigegerät dreht (typischerweise eine Maus). Es wird auch für verwandte Geräte ausgelöst, die Radaktionen simulieren, wie Trackpads und Maus-Bälle.

Dieses Ereignis ersetzt das nicht standardisierte, 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 kann das Element überhaupt nicht scrollbar sein. Auch Zoom-Aktionen mit dem Rad oder Trackpad lösen wheel-Ereignisse aus (mit ctrlKey auf true gesetzt).
Ein scroll-Ereignis wird nicht unbedingt durch ein wheel-Ereignis ausgelöst. Elemente können auch durch die Verwendung der Tastatur, durch Ziehen eines Scrollbalkens oder durch JavaScript gescrollt werden.
Selbst wenn das wheel-Ereignis das Scrollen auslöst, spiegeln die delta*-Werte im wheel-Ereignis nicht unbedingt die Scrollrichtung des Inhalts wider.

Verlassen Sie sich daher nicht auf die delta*-Eigenschaften des wheel-Ereignisses, um die Scrollrichtung zu bestimmen. Stattdessen sollten Sie die Werte von scrollLeft und scrollTop des Ziels im scroll-Ereignis überwachen.

Das wheel-Ereignis kann abgebrochen werden. In einigen Browsern ist nur das erste wheel-Ereignis in einer Sequenz abbruchfähig, spätere Ereignisse sind nicht abbruchfähig. Wenn das Ereignis abgebrochen wird, wird weder gescrollt noch gezoomt. Dies kann Leistungsprobleme verursachen, da der Browser warten muss, bis jedes wheel-Ereignis verarbeitet wurde, bevor der Inhalt tatsächlich gescrollt wird. Dies können Sie verhindern, indem Sie passive: true verwenden, wenn Sie addEventListener() aufrufen, was dazu führen kann, dass der Browser nicht-abbruchfähige wheel-Ereignisse generiert.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.

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 Schreibgeschützt

Gibt einen double zurück, der die horizontale Scrollmenge darstellt.

WheelEvent.deltaY Schreibgeschützt

Gibt einen double zurück, der die vertikale Scrollmenge darstellt.

WheelEvent.deltaZ Schreibgeschützt

Gibt einen double zurück, der die Scrollmenge für die z-Achse darstellt.

WheelEvent.deltaMode Schreibgeschützt

Gibt ein unsigned long zurück, das die Einheit der delta*-Werte für die Scrollmenge darstellt. Zulässige 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 Linien angegeben. Jede Mausklick-Scroll bewegt eine Linie des Inhalts, wobei die Methode zur Berechnung der Linienstärke browserabhängig ist.
`WheelEvent.DOM_DELTA_PAGE`	`0x02`	Die `delta*`-Werte sind in Seiten angegeben. Jede Mausklick-Scroll bewegt eine Seite des Inhalts.

WheelEvent.wheelDelta Schreibgeschützt Veraltet

Gibt einen Ganzzahlwert (32-Bit) zurück, der die Entfernung in Pixeln darstellt.

WheelEvent.wheelDeltaX Schreibgeschützt Veraltet

Gibt einen Ganzzahlwert zurück, der die horizontale Scrollmenge darstellt.

WheelEvent.wheelDeltaY Schreibgeschützt Veraltet

Gibt einen Ganzzahlwert zurück, der die vertikale Scrollmenge darstellt.

Beispiele

Skalieren eines Elements über das Rad

Dieses Beispiel zeigt, wie man ein Element mithilfe des Mausrads (oder eines anderen Zeigegeräts) 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 Ereignishandler kann auch unter Verwendung der addEventListener()-Methode eingerichtet werden:

el.addEventListener("wheel", zoom, { passive: false });

Spezifikationen

Specification
UI Events # event-type-wheel
HTML # handler-onwheel

Browser-Kompatibilität

Siehe auch

WheelEvent