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 Standard The 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.
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