JavaScript Element DOMMouseScroll Event

What You’ll Learn

The DOMMouseScroll event is a legacy Firefox scroll signal. Learn why it is Deprecated and Non-standard, how detail encodes direction, why preventDefault on this event alone is not enough, how to prefer wheel, and five try-it labs.

Introduction

Before the web settled on one wheel API, browsers invented their own scroll events. Firefox used DOMMouseScroll (and related Gecko events). Other engines used names like mousewheel. That fragmentation made cross-browser zoom, custom scrollers, and “block default scroll” logic painful.

Today the portable answer is the standard wheel event. Use DOMMouseScroll only when reading or migrating old Firefox-specific code.

Understanding DOMMouseScroll

An instance event that answered: “Did the user operate a mouse wheel (or similar) enough to scroll about a line or a page?”

• Deprecated & Non-standard on MDN — avoid in new projects.
• Firefox-only historically — not a Chromium / WebKit event.
• WheelEvent (MDN) — inherits from MouseEvent, UIEvent, and Event.
• Listen with addEventListener("DOMMouseScroll", ...) or onDOMMouseScroll.
• Replacement — the standardized wheel event.

📝 Syntax

Use the event name with addEventListener, or set the handler property:

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

onDOMMouseScroll = (event) => { };

Event type

A WheelEvent (inherits from MouseEvent, UIEvent, and Event). Legacy docs may also mention the older MouseScrollEvent interface name.

Notable property: detail

⚖️ DOMMouseScroll vs wheel

Examples Gallery

Examples follow MDN Element: DOMMouseScroll event. Labs also attach wheel so they still teach portable scrolling when DOMMouseScroll never fires.

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

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

DOMMouseScroll detail=-3
(or another non-zero detail; often nothing in Chromium)

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

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

onDOMMouseScroll detail=1

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

box.addEventListener("DOMMouseScroll", () => {
  out.textContent = "Fired: DOMMouseScroll (legacy Firefox)";
});

box.addEventListener("wheel", () => {
  out.textContent = "Fired: wheel (portable)";
});

Fired: wheel (portable)

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

function describeDetail(detail) {
  if (detail === 32768) return "page down";
  if (detail === -32768) return "page up";
  if (detail > 0) return "down (" + detail + " lines)";
  if (detail < 0) return "up (" + detail + " lines)";
  return "unexpected detail=" + detail;
}

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

box.addEventListener("wheel", (event) => {
  const dir = event.deltaY > 0 ? "down" : event.deltaY < 0 ? "up" : "side/other";
  out.textContent = "wheel: " + dir + " (deltaY=" + event.deltaY + ")";
});

wheel: down (deltaY=100)

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

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

wheel deltaY=100, deltaMode=0

🚀 Common Use Cases (Legacy Only)

• Reading old Firefox documentation that mentions DOMMouseScroll.
• Migrating legacy zoom / custom-scroll widgets that targeted Gecko only.
• Interview questions comparing legacy wheel events vs standard wheel.
• Understanding why blocking scroll needs wheel.preventDefault().
• Recognizing related legacy names: MozMousePixelScroll, mousewheel.

🔧 How It Works (When Supported)

📝 Notes

• MDN: Deprecated & Non-standard — both status banners required before What You’ll Learn.
• Not Experimental on the MDN Element page for this event.
• Firefox-only historically; other engines never made this the portable API.
• To cancel scrolling on modern Gecko, preventDefault() the wheel event.
• Related learning: DOMActivate, focus, addEventListener(), JavaScript hub.

💡 Best Practices