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 eine Radtaste auf einem Zeigegerät (typischerweise einer Maus) dreht. Es wird auch bei verwandten Geräten ausgelöst, die Radaktionen simulieren, wie Trackpads und Maus-Balls.

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 notwendigerweise 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.
Ein scroll-Ereignis wird nicht unbedingt durch ein wheel-Ereignis ausgelöst. Elemente können auch mit 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 notwendigerweise 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 Änderungen der Werte von scrollLeft und scrollTop des Ziels im scroll-Ereignis erkennen.

Das wheel-Ereignis ist abbrechbar. In einigen Browsern ist nur das erste wheel-Ereignis in einer Sequenz abbrechbar, und spätere Ereignisse sind nicht abbrechbar. Wenn das Ereignis abgebrochen wird, erfolgt kein Scrollen oder Zoomen. Dies kann zu Leistungsproblemen führen, da der Browser warten muss, bis jedes wheel-Ereignis verarbeitet ist, bevor er den Inhalt tatsächlich scrollt. Sie können dies vermeiden, indem Sie passive: true verwenden, wenn Sie addEventListener() aufrufen, was bewirken kann, dass der Browser nicht abbrechbare wheel-Ereignisse generiert.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener(), oder setzen Sie eine Ereignis-Handler-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 einen unsigned long zurück, der die Einheit der delta*-Werte der Scrollmenge darstellt. Erlaubte Werte sind:

Konstante	Wert	Beschreibung
`WheelEvent.DOM_DELTA_PIXEL`	`0x00`	Die `delta*`-Werte sind in Pixel angegeben.
`WheelEvent.DOM_DELTA_LINE`	`0x01`	Die `delta*`-Werte sind in Zeilen angegeben. Jeder Mausklick scrollt eine Zeile Inhalt, 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 Schreibgeschützt Veraltet

Gibt ein (32-Bit) Integer zurück, das die Entfernung in Pixel darstellt.

WheelEvent.wheelDeltaX Schreibgeschützt Veraltet

Gibt ein Integer zurück, das die horizontale Scrollmenge darstellt.

WheelEvent.wheelDeltaY Schreibgeschützt Veraltet

Gibt ein Integer zurück, das die vertikale Scrollmenge darstellt.

Beispiele

Skalieren eines Elements über das Rad

Dieses Beispiel zeigt, wie Sie ein Element mithilfe des Mausrads (oder eines anderen Zeigegeräts) skalieren können.

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 Ereignis-Handler kann auch mit der Methode addEventListener() eingerichtet werden:

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

Spezifikationen

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

Browser-Kompatibilität

Siehe auch

WheelEvent