Syntax
Use the event name in methods like addEventListener(), or set an event handler property.
js
addEventListener("wheel", (event) => { })
onwheel = (event) => { }
Event type
A WheelEvent. Inherits from MouseEvent, UIEvent and Event.
Examples
Scaling an element via the wheel
This example shows how to scale an element using the mouse (or other pointing device) wheel.
html
<div>Scale me with your mouse wheel.</div>
css
body {
min-height: 100vh;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
div {
width: 105px;
height: 105px;
background: #ccddff;
padding: 5px;
}
js
let scale = 1;
const el = document.querySelector("div");
function zoom(event) {
event.preventDefault();
scale += event.deltaY * -0.01;
// Restrict scale
scale = Math.min(Math.max(0.125, scale), 4);
// Apply scale transform
el.style.transform = `scale(${scale})`;
}
el.onwheel = zoom;
addEventListener equivalent
The event handler can also be set up using the addEventListener() method:
js
el.addEventListener("wheel", zoom, { passive: false });
Specifications
| Specification |
|---|
| Pointer Events # wheel |
| HTML # handler-onwheel |