onwheel Event
Example
When the user rolls the mouse wheel over a <div> element, change its font-size:
document.getElementById("myDIV").addEventListener("wheel", myFunction);
function myFunction() {
this.style.fontSize = "35px";
}
Try it Yourself »
Description
The onwheel event occurs when the mouse wheel is rolled over an element.
The onwheel event also occurs when the user scrolls using a touchpad.
Syntax
In JavaScript, using the addEventListener() method:
object.addEventListener("wheel", myScript);
Try it Yourself »
Technical Details
| Bubbles: | Yes |
|---|---|
| Cancelable: | Yes |
| Event type: | WheelEvent |
| HTML tags: | All HTML elements |
| DOM Version: | Level 3 Events |
Browser Support
onwheel is a DOM Level 3 (2004) feature.
It is fully supported in all modern browsers:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Yes | Yes | Yes | Yes | Yes | 11 |
