Latest web development tutorials
 

onwheel Event

< Event Object

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 Yourself »

In JavaScript:

object.onwheel=function(){myScript};
Try it Yourself »

In JavaScript, using the addEventListener() method:

object.addEventListener("wheel", myScript);
Try it Yourself »

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