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 »
Definition and Usage
The onwheel event occurs when the mouse wheel is rolled up or down over an element.
The onwheel event also occurs when the user scrolls or zooms in or out of an element by using a touchpad (like the "mouse" of a laptop).
Browser Support
The numbers in the table specify the first browser version that fully supports the event.
| Event | |||||
|---|---|---|---|---|---|
| onwheel | 31.0 | 9.0 | 17.0 | Not supported | 18.0 |
Note: In IE, the wheel event is only supported with the addEventListener() method. There is no onwheel attribute on DOM objects.
Syntax
In HTML:
<element onwheel="myScript">Try it
In JavaScript:
object.onwheel=function(){myScript};Try it
In JavaScript, using the addEventListener() method:
object.addEventListener("wheel", myScript);Try it
Note: The addEventListener() method is not supported in Internet Explorer 8 and earlier versions.
Technical Details
| Bubbles: | Yes |
|---|---|
| Cancelable: | Yes |
| Event type: | WheelEvent |
| Supported HTML tags: | All HTML elements |
| DOM Version: | Level 3 Events |
Event Object
