JavaScript Element MozMousePixelScroll Event

What You’ll Learn

The MozMousePixelScroll event is a Firefox-only scroll signal. Learn why it is Deprecated and Non-standard, how detail encodes direction, how it relates to DOMMouseScroll / mousewheel, and how to migrate to the standard wheel event—with five examples and try-it labs.

Introduction

Before the web standardized on wheel, Firefox shipped several proprietary scroll events. MozMousePixelScroll was the Mozilla-prefixed, pixel-oriented companion to line/page-oriented DOMMouseScroll.

MDN’s guidance is direct: do not use this obsolete event. Always prefer the standard wheel event for portable scroll, zoom, and custom-scroller logic.

Understanding MozMousePixelScroll

An instance event (legacy) that answered: “Did a mouse wheel or similar device operate over this element (Firefox path)?”

• Deprecated & Non-standard on MDN — avoid in new projects.
• Firefox-only historically — Mozilla-prefixed, not Chromium / WebKit.
• WheelEvent (MDN) — older docs also mention MouseScrollEvent.
• Listen with addEventListener("MozMousePixelScroll", ...) or onMozMousePixelScroll.
• Replacement — the standardized wheel event.

📝 Syntax

Legacy listeners used the event name with addEventListener, or the handler property:

addEventListener("MozMousePixelScroll", (event) => { });

onMozMousePixelScroll = (event) => { };

Prefer this instead

addEventListener("wheel", (event) => {
  // event.deltaY, event.deltaX, event.deltaMode
});

Event type

A WheelEvent (inherits from MouseEvent, UIEvent, and Event). Legacy Gecko docs may also mention MouseScrollEvent.

Notable property: detail

⚡ When MozMousePixelScroll Fired

• A mouse wheel or similar device was operated (asynchronously) on supporting Firefox builds.
• It could fire repeatedly during continuous scrolling.
• Outside Firefox it did not fire—so it failed as a cross-browser API.

⚖️ Legacy Scroll Events vs wheel

Examples Gallery

Examples follow MDN Element: MozMousePixelScroll event for learning and migration. Prefer wheel in production. Labs also attach wheel so they teach something useful outside Firefox.

const box = document.getElementById("box");
const out = document.getElementById("out");

box.addEventListener("MozMousePixelScroll", (event) => {
  out.textContent = "MozMousePixelScroll detail=" + event.detail;
});

MozMousePixelScroll detail=-40
(or another non-zero detail; often nothing in Chromium)

const box = document.getElementById("box");
const out = document.getElementById("out");

box.onMozMousePixelScroll = (event) => {
  out.textContent = "onMozMousePixelScroll detail=" + event.detail;
};

onMozMousePixelScroll detail=12

const box = document.getElementById("box");
const out = document.getElementById("out");

box.addEventListener("MozMousePixelScroll", (event) => {
  const dir =
    event.detail < 0
      ? "toward bottom/right"
      : "toward top/left";
  out.textContent = "detail=" + event.detail + " (" + dir + ")";
});

detail=-24 (toward bottom/right)

const box = document.getElementById("box");
const out = document.getElementById("out");

box.addEventListener("wheel", (event) => {
  out.textContent =
    "wheel deltaY=" + event.deltaY +
    " deltaX=" + event.deltaX +
    " mode=" + event.deltaMode;
});

wheel deltaY=100 deltaX=0 mode=0

const box = document.getElementById("box");
const out = document.getElementById("out");

function onScrollGesture(event, source) {
  if (source === "wheel") {
    out.textContent = "wheel dy=" + event.deltaY;
    return;
  }
  // Legacy Firefox path — avoid in new apps
  out.textContent = "MozMousePixelScroll detail=" + event.detail;
}

box.addEventListener("wheel", (event) => onScrollGesture(event, "wheel"));

// Optional legacy listen (Firefox-only; usually unnecessary today)
box.addEventListener("MozMousePixelScroll", (event) =>
  onScrollGesture(event, "MozMousePixelScroll")
);

wheel dy=100

🚀 Common Use Cases

• Reading or migrating legacy Firefox scroll / zoom handlers.
• Teaching why Mozilla-prefixed events fail outside Gecko.
• Comparing detail with standard deltaY.
• Documenting a migration checklist alongside DOMMouseScroll / mousewheel.
• Not recommended: building new scroll UX on MozMousePixelScroll.

🔧 How It Works

📝 Notes

• MDN: Deprecated and Non-standard — avoid in production.
• Firefox-only historically; Chromium / WebKit never implemented it.
• Related Gecko legacy: DOMMouseScroll; non-Gecko legacy: mousewheel.
• Always migrate to the standardized wheel event.
• Related learning: mousewheel, DOMMouseScroll, addEventListener(), JavaScript hub.

💡 Best Practices