onwheel Event

DOM Events WheelEvent

Definition and Usage

The onwheel event occurs when the mouse wheel scrolls up or down over an element.

The onwheel event also occurs when the user scrolls or zooms in or out of an element using a touchpad.

Example

Change the font size of the <div> element when the user scrolls the mouse wheel over it:

document.getElementById("myDIV").addEventListener("wheel", myFunction);
function myFunction() {
  this.style.fontSize = "35px";
}

Try It Yourself

Syntax

In HTML:

<element onwheel="myScript">

Try It Yourself

In JavaScript:

object.onwheel = function(){myScript};

Try It Yourself

In JavaScript, use the addEventListener() method:

object.addEventListener("wheel", myScript);

Try It Yourself

Note:Internet Explorer 8 or earlier versions do not support addEventListener() Method.

Technical Details

Bubbling: Supported
Cancelable: Supported
Event type: WheelEvent
Supported HTML tags: All HTML elements
DOM Version: Level 3 Events

Browser Support

The numbers in the table indicate the first browser version that fully supports this event.

event Chrome IE Firefox Safari Opera
onwheel 31.0 9.0 17.0 Not Supported 18.0

Note:In IE, wheel events are only supported through the addEventListener() method. There is no onwheel property on the DOM object.

DOM Events WheelEvent