Latest web development tutorials

×

JavaScript Reference

JavaScript

JS String JS Number JS Operators JS Statements JS Math JS Date JS Array JS Boolean JS RegExp JS Global JS Conversion

Browser BOM

Window Navigator Screen History Location

HTML DOM

DOM Document DOM Elements DOM Attributes DOM Events DOM Style

HTML Objects

<a> <abbr> <address> <area> <article> <aside> <audio> <b> <base> <bdo> <blockquote> <body> <br> <button> <canvas> <caption> <cite> <code> <col> <colgroup> <datalist> <dd> <del> <details> <dfn> <dialog> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <footer> <form> <head> <header> <h1> - <h6> <hr> <html> <i> <iframe> <img> <ins> <input> button <input> checkbox <input> color <input> date <input> datetime <input> datetime-local <input> email <input> file <input> hidden <input> image <input> month <input> number <input> password <input> radio <input> range <input> reset <input> search <input> submit <input> text <input> time <input> url <input> week <kbd> <keygen> <label> <legend> <li> <link> <map> <mark> <menu> <menuitem> <meta> <meter> <nav> <object> <ol> <optgroup> <option> <output> <p> <param> <pre> <progress> <q> <s> <samp> <script> <section> <select> <small> <source> <span> <strong> <style> <sub> <summary> <sup> <table> <td> <th> <tr> <textarea> <time> <title> <track> <u> <ul> <var> <video>

Other Objects

CSSStyleDeclaration

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