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

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 Zoom-Aktionen, die das Rad oder das Trackpad nutzen, 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 Tastatur, das Ziehen eines Scrollbalkens oder durch JavaScript gescrollt werden.
Selbst wenn das wheel-Ereignis 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 Wertänderungen von scrollLeft und scrollTop des Ziels im scroll-Ereignis erkennen.

Das wheel-Ereignis ist abbruchsicher. In einigen Browsern ist nur das erste wheel-Ereignis in einer Sequenz abbruchsicher, und spätere Ereignisse sind nicht abbruchsicher. 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. Sie können dies vermeiden, indem Sie passive: true verwenden, 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 Ereignishandler-Eigenschaft.

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

onwheel = (event) => { }

Ereignistyp

Ein WheelEvent. Erbt von MouseEvent, UIEvent und Event.

Ereigniseigenschaften

Dieses Interface erbt Eigenschaften von seinen 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 des Scrollbetrags von delta* angibt. 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 Inhalt, wobei die Methode zur Berechnung der Zeilenhöhe vom Browser abhä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 ein ganzzahliges (32-Bit) Ergebnis zurück, das die Entfernung in Pixeln darstellt.

WheelEvent.wheelDeltaX Schreibgeschützt Veraltet

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

WheelEvent.wheelDeltaY Schreibgeschützt Veraltet

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

Beispiele

Ein Element über das Rad skalieren

Dieses Beispiel zeigt, wie ein Element mit dem Rad der Maus (oder einem anderen Zeigegerät) skaliert werden kann.

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: #ccddff;
  padding: 5px;
}

let scale = 1;
const el = document.querySelector("div");

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})`;
}

el.onwheel = zoom;

Entsprechendes addEventListener

Der Ereignishandler 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

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden