JavaScript Element DOMMouseScroll Event

Beginner
5 min read
Updated: Nov 2026
3 examples
Event
Decorative image with the word DOMMOUSESCROLL

Definition

In JavaScript, the DOMMouseScroll event fires asynchronously when a mouse wheel (or similar device) is operated and the accumulated scroll amount is over about one line or one page since the last event (MDN). It was implemented only by Firefox.

Register a listener with addEventListener. Check readiness and browser support before you rely on this event.

Syntax

Listen for DOMMouseScroll. Start with this line.

JavaScript
addEventListener("DOMMouseScroll", fn)
CallWhat it does
addEventListener("DOMMouseScroll", fn)Primary signature.

Built into the browser. Listen with el.addEventListener("DOMMouseScroll", …) — no import required.

Library declarations
JavaScript
addEventListener("DOMMouseScroll", fn)

Parameters

ParameterDescription
Handler propOptional. onDOMMouseScroll

Return Value

Return ValueDescription
*Fires as an Element event (listener receives the Event object).

JavaScript Examples

Example 1 — Legacy DOMMouseScroll (Firefox)

Study-only listener. Expect silence outside Firefox.

JavaScript
window.addEventListener("DOMMouseScroll", (event) => {
  console.log("DOMMouseScroll detail:", event.detail);
});
Try It Yourself

How It Works

  1. Listen for the Firefox event name. Case-sensitive: "DOMMouseScroll".
  2. Read event.detail in old Gecko code for direction / amount hints.
  3. Expect no events elsewhere. MDN: only Firefox implemented this.
  4. Do not ship this in new projects — status is Deprecated · Non-standard.

Example 2 — Compare with wheel

Log both so you can see which signal your browser still uses.

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

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

window.addEventListener("wheel", (event) => {
  out.textContent += "wheel deltaY=" + event.deltaY + "\\n";
}, { passive: true });
Try It Yourself

How It Works

  1. Attach both listeners. Same gesture, different event names.
  2. Scroll with the wheel/trackpad. Modern engines fire wheel.
  3. Use { passive: true } when you only log — better scroll performance.
  4. Migrate when you only see wheel. That is the portable path.

Example 3 — Prefer wheel (Recommended)

The standard replacement for all new scroll-gesture code.

JavaScript
window.addEventListener("wheel", (event) => {
  console.log("deltaY:", event.deltaY);
}, { passive: true });
Try It Yourself

How It Works

  1. Listen for wheel. Standard DOM event across modern browsers.
  2. Read deltaY. Positive/negative shows vertical scroll direction.
  3. Keep the listener passive unless you must call preventDefault.
  4. Replace every DOMMouseScroll string with "wheel" when migrating.
Compatibility

Browser Support

Element DOMMouseScroll is Deprecated and Non-standard on MDN (Firefox/Gecko history). Do not add it to new code — migrate to wheel.

✓ Deprecated · Non-standard

DOMMouseScroll

Legacy Firefox wheel/line-scroll event — study only, prefer wheel.

— Deprecated
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
DOMMouseScroll Firefox legacy

Bottom line: Use wheel + deltaY for portable apps. To cancel scrolling on modern Firefox, preventDefault on wheel.

Frequently Asked Questions

It is a legacy Firefox (Gecko) event fired asynchronously when a mouse wheel or similar device is operated and the accumulated scroll amount is over about one line or one page since the last event (MDN). Prefer the standard wheel event.
MDN marks it Deprecated and Non-standard. It is not Experimental. Avoid it in new projects — use wheel instead.
Historically Firefox only. Other engines do not implement this Firefox-specific event. Always use wheel for portable apps.
MDN lists the event type as WheelEvent (inherits from MouseEvent, UIEvent, and Event). Legacy Gecko also describes it via MouseScrollEvent.
No — not reliably. MDN: on Gecko 17+, call preventDefault() on wheel events, because small native wheel moves may not produce DOMMouseScroll.
Use the standardized wheel event. It works across browsers and exposes deltaX, deltaY, deltaZ, and deltaMode.

Next: focus

Learn the Element event that fires when an element receives focus.

focus tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Element DOMActivate Event JavaScript Element focus Event