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
Specification
Specification | Status | Comment |
---|---|---|
HTML Living StandardThe definition of 'onwheel' in that specification. | Living Standard |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
onwheel
|
Chrome
Full support 61 |
Edge
Full support 12 |
Firefox
Full support Yes |
IE
Full support Yes |
Opera
Full support 48 |
Safari
Full support Yes |
WebView Android
Full support 61 |
Chrome Android
Full support 61 |
Firefox Android
Full support Yes |
Opera Android
Full support 45 |
Safari iOS
Full support Yes |
Samsung Internet Android
Full support 8.0 |
Legend
- Full support
- Full support
See also
GlobalEventHandlers.onwheel by Mozilla Contributors is licensed under CC-BY-SA 2.5.