The onwheel
property of the
GlobalEventHandlers
mixin is an EventHandler
that
processes wheel
events.
The wheel
event fires when the user rotates the mouse (or other pointing
device) wheel.
Note: Don't confuse onwheel
with
onscroll
: onwheel
handles
general wheel rotation, while onscroll
handles scrolling of an object's
content.
Syntax
target.onwheel = functionRef;
Value
functionRef
is a function name or a function
expression. The function receives a WheelEvent
object as its sole
argument.
Examples
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: 80px;
height: 80px;
background: #cdf;
padding: 5px;
transition: transform .3s;
}
JavaScript
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;
Result
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'onwheel' in that specification. |
Living Standard |
Browser compatibility
BCD tables only load in the browser