Element: DOMMouseScroll — Ereignis · JavaScript-Referenz

Signatur

element.addEventListener("DOMMouseScroll", handler)

Beschreibung

Das Ereignis DOMMouseScroll ist eine Gecko-spezifische Erweiterung von Firefox. Es wird asynchron ausgelöst, wenn der Benutzer das Mausrad (oder ein ähnliches Eingabegerät wie ein Touchpad) betätigt und sich seit dem letzten Ereignis eine Scrollmenge von mindestens einer Zeile bzw. einer Seite angesammelt hat. Das Ereignisobjekt ist ein MouseScrollEvent (abgeleitet von MouseEvent).

Die wichtigste Eigenschaft ist event.detail: Ein positiver Wert bedeutet Scrollen nach unten bzw. rechts, ein negativer nach oben bzw. links. Üblich sind Werte wie ±3 (Zeilen). Beim seitenweisen Scrollen liefert detail die Konstanten UIEvent.SCROLL_PAGE_DOWN (32768) bzw. UIEvent.SCROLL_PAGE_UP (-32768). Über event.axis lässt sich zwischen horizontaler (HORIZONTAL_AXIS = 1) und vertikaler Achse (VERTICAL_AXIS = 2) unterscheiden.

Registriert wird das Ereignis ausschließlich mit addEventListener() – eine Eigenschaft onDOMMouseScroll existiert nicht. Für neuen Code sollte man stattdessen das standardisierte wheel-Ereignis verwenden; DOMMouseScroll ist nur noch für Legacy-Code oder sehr alte Firefox-Versionen (vor Firefox 17) relevant.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname `"DOMMouseScroll"` (Groß-/Kleinschreibung beachten).
$handler Pflicht	(event: MouseScrollEvent) => void		Callback, der das Ereignisobjekt erhält. Wichtig sind `event.detail` (Scrollmenge in Zeilen bzw. Seitenkonstante) und `event.axis`.
$options	boolean \| AddEventListenerOptions	false	Optionen wie `{ passive: false }`, falls `preventDefault()` das Standard-Scrollen unterbinden soll.

Rückgabewert

Typ

void

Beschreibung

addEventListener() gibt undefined zurück. Der Handler erhält ein MouseScrollEvent-Objekt.

Beispiele

Scrollrichtung mit addEventListener erkennen

const box = document.querySelector('#scrollbox');

box.addEventListener('DOMMouseScroll', (event) => {
  // detail > 0: nach unten, detail < 0: nach oben
  const richtung = event.detail > 0 ? 'unten' : 'oben';
  console.log(`Scroll nach ${richtung}, ${Math.abs(event.detail)} Zeilen`);
});

Scroll nach unten, 3 Zeilen

Legacy-Fallback mit Feature-Erkennung und wheel

const zoomElement = document.querySelector('#karte');
let zoom = 1;

const zoomen = (richtung) => {
  zoom = Math.min(5, Math.max(0.5, zoom + richtung * 0.1));
  zoomElement.style.transform = `scale(${zoom})`;
};

if ('onwheel' in document.createElement('div')) {
  // Moderner Standard
  zoomElement.addEventListener('wheel', (e) => {
    e.preventDefault();
    zoomen(e.deltaY < 0 ? 1 : -1);
  }, { passive: false });
} else {
  // Sehr altes Firefox
  zoomElement.addEventListener('DOMMouseScroll', (e) => {
    e.preventDefault();
    zoomen(e.detail < 0 ? 1 : -1);
  }, false);
}

Listener wieder entfernen und Achse prüfen

const onScroll = (event) => {
  const horizontal = event.axis === event.HORIZONTAL_AXIS;
  console.log(horizontal ? 'Horizontal' : 'Vertikal', event.detail);
};

window.addEventListener('DOMMouseScroll', onScroll);

// Nach 10 Sekunden nicht mehr lauschen
setTimeout(() => {
  window.removeEventListener('DOMMouseScroll', onScroll);
  console.log('Listener entfernt');
}, 10000);

Vertikal 3 Listener entfernt

// Wichtig · Fallstricke

Nicht standardisiert und veraltet: Nur Firefox/Gecko unterstützt das Ereignis. Chrome, Safari und Edge lösen es nie aus. Verwenden Sie stattdessen das wheel-Ereignis (Baseline in allen modernen Browsern, Firefox ab Version 17).
Es gibt keine Handler-Eigenschaft onDOMMouseScroll – nur addEventListener() funktioniert.
event.detail hat bei seitenweisem Scrollen die Sonderwerte 32768/-32768; diese nicht als Zeilenanzahl interpretieren.
Das Vorzeichen ist gegenüber dem alten mousewheel-Ereignis (wheelDelta) umgekehrt – ein häufiger Fehler bei browserübergreifendem Legacy-Code.
Für pixelgenaues Scrollen gab es in Firefox zusätzlich MozMousePixelScroll; auch dies ist veraltet.
Bei Registrierung auf window/document in modernen Browsern sind Wheel-Listener standardmäßig passiv; preventDefault() erfordert dann { passive: false }.

Siehe auch

WheelEvent EventTarget.addEventListener() CreateMonitor: downloadprogress Element: MozMousePixelScroll Element: mousedown