Document: wheel event

The wheel event fires when the user rotates a wheel button on a pointing device (typically a mouse).

This event replaces the non-standard deprecated mousewheel event.

Examples

Scaling an element via the wheel

This example shows how to scale an element using the mouse (or other pointing device) wheel.

<div>Scale me with your mouse wheel.</div>

body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

div {
  width: 105px;
  height: 105px;
  background: #cdf;
  padding: 5px;
}

function zoom(event) {
  event.preventDefault();

  if (event.deltaY < 0) {
    // Zoom in
    scale *= event.deltaY * -2;
  }
  else {
    // Zoom out
    scale /= event.deltaY * 2;
  }

  // Restrict scale
  scale = Math.min(Math.max(.125, scale), 4);

  // Apply scale transform
  el.style.transform = `scale(${scale})`;
}

let scale = 1;
const el = document.querySelector('div');
document.onwheel = zoom;

addEventListener equivalent

The event handler can also be set up using the addEventListener() method:

document.addEventListener('wheel', zoom);

Specifications

Browser compatibility

See also

• WheelEvent