HTML onmousewheel Attribute

Introduction

The onmousewheel attribute is a legacy inline event handler for the non-standard mousewheel event. It runs JavaScript when the user turns the mouse wheel over an element. You may still see it in older tutorials and IE-era code. For new projects, use the standard onwheel attribute and wheel event instead — they work in Firefox and all modern browsers. Pass event and read event.deltaY (vertical scroll amount; positive usually means scroll down). Use a scrollable container or focus the element so wheel events are easy to test.

What You’ll Learn

Purpose of onmousewheel Attribute

The original purpose of onmousewheel was to run custom JavaScript when the user scrolls the wheel — for example custom zoom, image carousels, or intercepting scroll inside a map. It predates the standardized wheel event.

Today, treat onmousewheel as historical. Write new code with onwheel or addEventListener("wheel", …). The handler receives a WheelEvent with deltaY, deltaX, and deltaMode.

📝 Syntax

Legacy onmousewheel and standard onwheel side by side:

<!-- Legacy (avoid in new projects) -->
<div onmousewheel="handleWheel(event)">…</div>

<!-- Standard (preferred) -->
<div onwheel="handleWheel(event)" tabindex="0">
  Scroll wheel here
</div>

Syntax Rules

• onmousewheel is legacy; prefer onwheel for new HTML.
• Value is JavaScript executed when a wheel gesture occurs over the element.
• Pass event to read deltaY, deltaX, deltaMode.
• Works on most elements; use overflow:auto on tall content when testing scroll.
• Not the same as the scroll event (position changed vs wheel turned).
• Modern alternative: el.addEventListener("wheel", handler).
• To call preventDefault(), register with { passive: false } in script.

💎 Values

The attribute accepts a string of JavaScript code:

• onwheel="handleWheel(event)" — Standard handler with event object.
• onmousewheel="handleWheel(event)" — Legacy equivalent (limited browser support).
• JavaScript: box.onwheel = (e) => { … } — property assignment.

function handleWheel(event) {
  if (event.deltaY > 0) {
    status.textContent = "Scrolled down (deltaY: " + event.deltaY + ")";
  } else if (event.deltaY < 0) {
    status.textContent = "Scrolled up (deltaY: " + event.deltaY + ")";
  }
}

Applicable Elements

onmousewheel vs onwheel vs onscroll

Examples Gallery

Read deltaY on wheel, addEventListener on a scroll box, and adjust a zoom counter from wheel direction.

<div onwheel="handleWheel(event)" tabindex="0">
  Scroll wheel here
</div>
<p id="output"></p>

<script>
  function handleWheel(event) {
    document.getElementById("output").textContent =
      "deltaY: " + event.deltaY;
  }
</script>

<div id="myElement" tabindex="0">Wheel here</div>

<script>
  document.getElementById("myElement").addEventListener("wheel", function (event) {
    document.getElementById("log").textContent =
      "Wheel: deltaY = " + event.deltaY;
  });
</script>

let zoom = 100;

box.addEventListener("wheel", (event) => {
  if (event.deltaY < 0) zoom += 10;
  else if (event.deltaY > 0) zoom -= 10;
  zoom = Math.max(50, Math.min(200, zoom));
  label.textContent = "Zoom: " + zoom + "%";
});

♿ Accessibility

• Do not trap scroll — Avoid preventDefault() on wheel unless necessary; it blocks normal page scroll.
• Provide keyboard alternatives — +/- keys or buttons for zoom when wheel-only controls exist.
• Respect reduced motion — Check prefers-reduced-motion before wheel-driven animations.
• Focusable targets — Add tabindex="0" if a non-interactive div must receive wheel focus for demos.
• Touch and trackpad users — Wheel events cover more than classic mouse wheels; test on laptops.

💡 Best Practices