onwheelEvent
Event ObjectExamples
Execute JavaScript when the user scrolls the mouse wheel over a <div> element:
document.getElementById("myDIV").addEventListener("wheel", myFunction);
function myFunction() {
document.getElementById("myDIV").style.color = "red";
}
Try it Yourself »
Definition and Usage
The onwheel event fires when the mouse wheel is scrolled up or down over an element.
The onwheel event also fires when scrolling or zooming in/out on a touchpad (such as a laptop touchpad).
Browser Support
| Event | |||||
|---|---|---|---|---|---|
| onwheel | 31.0 | 9.0 | 17.0 | 6.0 | 18.0 |
Note:In IE browsers, the wheel event is only supported via the addEventListener() method. There is no onwheel attribute in the DOM object.
Syntax
In HTML:
<element onwheel="myScript">Try it Yourself
In JavaScript:
object.onwheel=function(){myScript};Try it Yourself
In JavaScript, using the addEventListener() method:
object.addEventListener("wheel", myScript);Try it Yourself
Note:Internet Explorer 8 and earlier IE versions do not supportaddEventListener()the method.
Technical Details
| Bubbles: | Yes |
|---|---|
| Cancelable: | Yes |
| Event type: | WheelEvent |
| Supported HTML tags: | All HTML elements |
Other Extensions