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-Event wird ausgelöst, wenn der Benutzer ein Rad an einem Zeigegerät (in der Regel eine Maus) dreht. Es wird auch für verwandte Geräte ausgelöst, die Radaktionen simulieren, wie Trackpads und Mausrollen.

Dieses Event ersetzt das nicht standardisierte, veraltete mousewheel-Event.

Verwechseln Sie das wheel-Event nicht mit dem scroll-Event:

Ein wheel-Event löst nicht unbedingt ein scroll-Event aus. Beispielsweise kann das Element überhaupt nicht scrollbar sein. Zoom-Aktionen mit dem Rad oder Trackpad lösen ebenfalls wheel-Events aus.
Ein scroll-Event wird nicht unbedingt durch ein wheel-Event ausgelöst. Elemente können auch mit der Tastatur, durch Ziehen eines Scrollbalkens oder durch JavaScript gescrollt werden.
Selbst wenn das wheel-Event ein Scrollen auslöst, spiegeln die delta*-Werte im wheel-Event nicht unbedingt die Scrollrichtung des Inhalts wider.

Verlassen Sie sich daher nicht auf die delta*-Eigenschaften des wheel-Events, um die Scrollrichtung zu bestimmen. Erfassen Sie stattdessen Wertänderungen von scrollLeft und scrollTop des Ziels im scroll-Event.

Das wheel-Event kann abgebrochen werden. Wenn das Event abgebrochen wird, wird kein Scrollen oder Zoomen durchgeführt. Dies kann Leistungsprobleme verursachen, da der Browser auf die Verarbeitung jedes Wheel-Events warten muss, bevor der Inhalt tatsächlich gescrollt wird. Dies können Sie vermeiden, indem Sie passive: true verwenden, wenn Sie addEventListener() aufrufen, was dazu führen kann, dass der Browser nicht abbrechbare wheel-Events erzeugt.

Syntax

Verwenden Sie den Eventnamen in Methoden wie addEventListener(), oder setzen Sie eine Event-Handler-Eigenschaft.

addEventListener("wheel", (event) => { })

onwheel = (event) => { }

Event-Typ

Ein WheelEvent. Erbt von MouseEvent, UIEvent und Event.

Event-Eigenschaften

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 Inhalt.

WheelEvent.wheelDelta Schreibgeschützt Veraltet

Gibt einen Integer (32-Bit) zurück, der die Entfernung in Pixel angibt.

WheelEvent.wheelDeltaX Schreibgeschützt Veraltet

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

WheelEvent.wheelDeltaY Schreibgeschützt Veraltet

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

Beispiele

Skalieren eines Elements über das Rad

Dieses Beispiel zeigt, wie Sie ein Element mit dem Mausrad (oder einem anderen Zeigegerät) 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;

Der addEventListener Äquivalent

Der Event-Handler kann auch mit 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