Element: wheel event
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Want more browser support for this feature? Tell us why.
Das wheel-Ereignis wird ausgelöst, wenn der Benutzer eine Rad-Taste an einem Zeigegerät (typischerweise einer Maus) dreht. Es wird auch für verwandte Geräte ausgelöst, die Rad-Aktionen simulieren, wie z.B. Trackpads und Mauskugeln.
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 einscroll-Ereignis aus. Zum Beispiel kann das Element überhaupt nicht scrollbar sein. Auch Zoom-Aktionen mit dem Rad oder Trackpad lösenwheel-Ereignisse aus (mitctrlKey, das auf wahr gesetzt ist). - Ein
scroll-Ereignis wird nicht unbedingt durch einwheel-Ereignis ausgelöst. Elemente können auch durch die Verwendung der Tastatur, Ziehen eines Scrollbalkens oder mittels JavaScript gescrollt werden. - Selbst wenn das
wheel-Ereignis tatsächlich ein Scrollen bewirkt, spiegeln diedelta*-Werte imwheel-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 abbruchbar. In einigen Browsern ist nur das erste wheel-Ereignis in einer Sequenz abbruchbar, und spätere Ereignisse sind nicht abbruchbar. Wenn das Ereignis abgebrochen wird, erfolgt kein Scrollen oder Zoomen. Dies kann Leistungsprobleme verursachen, da der Browser auf die Verarbeitung jedes wheel-Ereignisses warten muss, bevor der Inhalt tatsächlich gescrollt wird. Sie können dies vermeiden, indem Sie passive: true beim Aufruf von addEventListener() einstellen, was dazu führen kann, dass der Browser nicht abrechenbare wheel-Ereignisse erzeugt.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener(), oder setzen Sie eine Ereignishandlereigenschaft.
addEventListener("wheel", (event) => { })
onwheel = (event) => { }
Ereignistyp
Ein WheelEvent. Erbt von MouseEvent, UIEvent und Event.
Beispiele
Skalierung eines Elements über das Rad
Dieses Beispiel zeigt, wie ein Element mit dem Maus-(oder einem anderen Zeigegeräte-)Rad skaliert werden kann.
<div>Scale me with your mouse wheel.</div>
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;
Äquivalent zu addEventListener
Der Ereignishandler kann auch mit der addEventListener()-Methode eingerichtet werden:
el.addEventListener("wheel", zoom, { passive: false });
Spezifikationen
| Spezifikation |
|---|
| Pointer Events # wheel |
| HTML # handler-onwheel |