Element: MozMousePixelScroll — Ereignis · JavaScript-Referenz

Signatur

element.addEventListener("MozMousePixelScroll", handler)

Beschreibung

MozMousePixelScroll ist ein proprietäres Gecko-Ereignis. Firefox löst es aus, wenn der Nutzer ein Mausrad, ein Touchpad oder ein ähnliches Eingabegerät betätigt. Anders als das ebenfalls veraltete DOMMouseScroll, das die Bewegung in Zeilen meldet, liefert MozMousePixelScroll in der Eigenschaft detail die geschätzte Scroll-Menge in Pixeln. Positive Werte bedeuten Scrollen nach unten bzw. rechts, negative Werte nach oben bzw. links.

Das Ereignisobjekt ist ein MouseScrollEvent und erbt von MouseEvent. Über event.axis erkennt man die Richtung: event.HORIZONTAL_AXIS (1) oder event.VERTICAL_AXIS (2). Das Ereignis steigt im DOM auf (Bubbling) und lässt sich abbrechen. Mit preventDefault() unterbindet man das normale Scrollen.

Eine Eigenschaft onMozMousePixelScroll gibt es nicht. Der Handler lässt sich nur per addEventListener() registrieren und per removeEventListener() wieder entfernen. Früher kam das Ereignis vor allem in browserübergreifenden Scroll-Bibliotheken als Firefox-Fallback zum Einsatz. Heute ersetzt das standardisierte wheel-Ereignis es vollständig.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname `"MozMousePixelScroll"`. Groß- und Kleinschreibung müssen genau stimmen.
$handler Pflicht	(event: MouseScrollEvent) => void		Callback, der das Ereignisobjekt bekommt. Wichtig sind `event.detail` (Pixel-Delta), `event.axis` (Achse) und `event.preventDefault()`.
$options	boolean \| AddEventListenerOptions	false	Optionen wie `{ passive: false }`. Diese Option ist nötig, wenn `preventDefault()` das Scrollen verhindern soll.

Rückgabewert

Typ

void

Beschreibung

addEventListener() liefert undefined. Der Handler bekommt ein MouseScrollEvent mit detail (Pixel, number) und axis (1 = horizontal, 2 = vertikal).

Beispiele

Pixel-Scrollen protokollieren (addEventListener)

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

const onPixelScroll = (event) => {
  // axis: 1 = horizontal, 2 = vertikal
  const achse = event.axis === event.HORIZONTAL_AXIS ? 'horizontal' : 'vertikal';
  console.log(`${achse}: ${event.detail}px`);
};

box.addEventListener('MozMousePixelScroll', onPixelScroll);

vertikal: 57px vertikal: -57px

Eigenes Zoom-Verhalten und Listener wieder entfernen

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

const onZoom = (event) => {
  event.preventDefault(); // Seite soll nicht scrollen
  zoom = Math.min(4, Math.max(0.5, zoom - event.detail / 500));
  karte.style.transform = `scale(${zoom})`;
};

karte.addEventListener('MozMousePixelScroll', onZoom, { passive: false });

// Später, z. B. beim Schließen der Ansicht:
document.querySelector('#schliessen').addEventListener('click', () => {
  karte.removeEventListener('MozMousePixelScroll', onZoom, { passive: false });
});

Moderne Alternative: wheel mit Legacy-Fallback

const ziel = document.querySelector('#liste');

const verarbeite = (deltaY) => console.log('deltaY:', deltaY);

if ('onwheel' in document.createElement('div')) {
  // Standard: in allen aktuellen Browsern verfügbar
  ziel.addEventListener('wheel', (e) => verarbeite(e.deltaY), { passive: true });
} else {
  // Nur sehr alte Firefox-Versionen (vor 17)
  ziel.addEventListener('MozMousePixelScroll', (e) => {
    if (e.axis === e.VERTICAL_AXIS) verarbeite(e.detail);
  });
}

deltaY: 100

// Wichtig · Fallstricke

Veraltet und nicht standardisiert: Das Ereignis gibt es nur in Firefox/Gecko. Chrome, Safari und Edge kennen es nicht. Für neuen Code nimmt man ausschließlich das wheel-Ereignis, das seit Firefox 17 unterstützt wird.
Keine on-Eigenschaft: element.onMozMousePixelScroll = … hat keine Wirkung. Registrieren Sie den Handler nur über addEventListener().
Doppelte Verarbeitung: Firefox löst wheel, DOMMouseScroll und MozMousePixelScroll nacheinander aus. Wer mehrere davon abonniert, verarbeitet dieselbe Radbewegung mehrfach. Ruft ein wheel-Handler preventDefault() auf, feuern die Legacy-Ereignisse nicht mehr.
Pixelwerte sind Schätzungen: detail hängt von Systemeinstellungen, Schriftgröße und Zoom ab. Verlassen Sie sich nicht auf feste Werte pro Radstufe.
Leistung: Das Ereignis kann bei Touchpads sehr oft feuern. Aufwendige Arbeit im Handler sollten Sie drosseln, z. B. mit requestAnimationFrame. Mit passive: true kann das Scrollen flüssig bleiben, wenn Sie preventDefault() nicht brauchen.

Siehe auch

WheelEvent MouseEvent EventTarget.addEventListener() Element: DOMMouseScroll Element: mouseenter