Signatur
Beschreibung
WheelEvent.deltaX gibt an, wie weit bei einem wheel-Ereignis horizontal gescrollt werden soll. Ein positiver Wert bedeutet Scrollen nach rechts, ein negativer Scrollen nach links. Die Eigenschaft ist schreibgeschützt und ihr Wert ist eine Gleitkommazahl.
Horizontale Werte kommen vor allem von Touchpads (Wischen mit zwei Fingern), von Mäusen mit kippbarem Mausrad oder von Mäusen mit seitlichem Scrollrad. In vielen Browsern erzeugt auch Umschalt + Mausrad einen horizontalen Scrollbetrag. Bei einem normalen Mausrad ohne Umschalttaste ist deltaX meist 0.
Die Einheit des Werts hängt von event.deltaMode ab: 0 (DOM_DELTA_PIXEL) steht für Pixel, 1 (DOM_DELTA_LINE) für Zeilen und 2 (DOM_DELTA_PAGE) für Seiten. Wenn du eigene Scroll-Logik schreibst – etwa horizontale Karussells, Zeitleisten oder Canvas-Zoom und -Verschiebung –, solltest du den Wert immer abhängig von deltaMode in Pixel umrechnen.
Rückgabewert
double: positiv heißt nach rechts, negativ nach links. Die Einheit legt deltaMode fest.Beispiele
Horizontalen Scrollbetrag protokollieren
window.addEventListener('wheel', (event) => {
if (event.deltaX !== 0) {
const richtung = event.deltaX > 0 ? 'rechts' : 'links';
console.log(`deltaX: ${event.deltaX} (${richtung}), deltaMode: ${event.deltaMode}`);
}
});Horizontale Galerie mit dem Mausrad scrollen
const galerie = document.querySelector('.galerie');
// deltaX und deltaY abhängig von deltaMode in Pixel umrechnen
const inPixel = (delta, mode, el) => {
if (mode === WheelEvent.DOM_DELTA_LINE) return delta * 16;
if (mode === WheelEvent.DOM_DELTA_PAGE) return delta * el.clientWidth;
return delta;
};
galerie.addEventListener('wheel', (event) => {
// Vertikales Mausrad ebenfalls horizontal auswerten
const dominant = Math.abs(event.deltaX) > Math.abs(event.deltaY)
? event.deltaX
: event.deltaY;
const px = inPixel(dominant, event.deltaMode, galerie);
galerie.scrollLeft += px;
event.preventDefault();
}, { passive: false });Canvas-Ansicht per Touchpad verschieben
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const ansicht = { x: 0, y: 0 };
const zeichnen = () => {
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.setTransform(1, 0, 0, 1, -ansicht.x, -ansicht.y);
ctx.fillRect(100, 100, 50, 50);
};
canvas.addEventListener('wheel', (event) => {
event.preventDefault();
ansicht.x += event.deltaX;
ansicht.y += event.deltaY;
requestAnimationFrame(zeichnen);
}, { passive: false });
zeichnen();// Wichtig · Fallstricke
- Immer
deltaModeprüfen: Firefox hat bei echten Mausrädern früher Zeilen gemeldet (deltaMode === 1). Chrome und Safari melden in der Regel Pixel. Ohne Umrechnung scrollt deine Seite je nach Browser sehr unterschiedlich schnell. - Werte sind nicht einheitlich: Wie groß die Werte ausfallen, hängt von Betriebssystem, Gerät und Browser ab. Touchpads liefern viele kleine Werte mit Trägheitsnachlauf, Mausräder wenige große Sprünge. Verlass dich also nicht auf feste Schrittweiten.
- Umschalttaste: Chrome, Edge und Safari übertragen Umschalt + Mausrad oft auf
deltaX. Unter Firefox und manchen Systemen bleibt der Wert dagegen indeltaY, und nurshiftKeyist gesetzt. - Passive Listener: Chrome behandelt
wheel-Listener aufwindow,documentundbodystandardmäßig als passiv. Hier wirktpreventDefault()nur mit{ passive: false }. Das Blockieren kann aber die Scroll-Leistung verschlechtern. - Richtung: Ist unter macOS „natürliches Scrollen“ aktiv, ist das Vorzeichen aus Sicht des Nutzers umgekehrt. Der Browser meldet dann bereits die umgekehrten Werte.
- Nicht verwechseln mit den veralteten Eigenschaften
wheelDeltaX(nicht standardisiert) undMouseScrollEvent(veraltet, nur Firefox). Verwende ausschließlich das standardisiertewheel-Ereignis.