Element: wheel-Ereignis
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 ein Rad an einem Zeigegerät (typischerweise einer Maus) dreht. Es wird auch bei Geräten ausgelöst, die Radbewegungen simulieren, etwa Trackpads und Trackballs.
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. Beispielsweise kann das Element möglicherweise gar nicht gescrollt werden. Auch Zoomaktionen mit dem Mausrad oder Trackpad lösenwheel-Ereignisse aus (wobeictrlKeyauf true gesetzt ist). - Ein
scroll-Ereignis wird nicht unbedingt durch einwheel-Ereignis ausgelöst. Elemente können auch mit der Tastatur, durch Ziehen einer Bildlaufleiste oder mit JavaScript gescrollt werden. - Selbst wenn das
wheel-Ereignis einen Bildlauf auslöst, spiegeln diedelta*-Werte deswheel-Ereignisses nicht unbedingt die Bildlaufrichtung des Inhalts wider.
Verlassen Sie sich daher nicht auf die delta*-Eigenschaften des wheel-Ereignisses, um die Bildlaufrichtung zu ermitteln. Ermitteln Sie stattdessen im scroll-Ereignis Änderungen der Werte von scrollLeft und scrollTop des Zielelements.
Das wheel-Ereignis kann abgebrochen werden. In einigen Browsern kann nur das erste wheel-Ereignis einer Folge abgebrochen werden; spätere Ereignisse können nicht abgebrochen werden. Wird das Ereignis abgebrochen, findet weder ein Bildlauf noch ein Zoomvorgang statt. Dies kann zu Leistungsproblemen führen, da der Browser die Verarbeitung jedes wheel-Ereignisses abwarten muss, bevor er den Inhalt tatsächlich scrollt. Sie können dies vermeiden, indem Sie beim Aufruf von addEventListener() passive: true setzen. Dadurch generiert der Browser möglicherweise wheel-Ereignisse, die nicht abgebrochen werden können.
Syntax
Verwenden Sie den Ereignisnamen in addEventListener():
addEventListener("wheel", (event) => { })
Alternativ können Sie ihn der Event-Handler-Eigenschaft der Schnittstelle zuweisen:
onwheel = (event) => { }
Ereignistyp
Ein WheelEvent. Erbt von MouseEvent, UIEvent und Event.
Beispiele
Ein Element mit dem Mausrad skalieren
Dieses Beispiel zeigt, wie Sie ein Element mit dem Rad einer Maus (oder eines anderen Zeigegeräts) skalieren. Es verwendet die Event-Handler-Eigenschaft onwheel (beachten Sie jedoch, dass dadurch gegebenenfalls andere mit onwheel hinzugefügte Event-Listener ersetzt werden).
<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;
addEventListener() verwenden
Der Event-Handler kann auch mit der Methode addEventListener() eingerichtet werden:
el.addEventListener("wheel", zoom, { passive: false });
Spezifikationen
| Spezifikation |
|---|
| Pointer Events # wheel |
| HTML # handler-onwheel |