You are here: Reference > JavaScript > client-side > event handling > events > onmousewheel

onmousewheel event | mousewheel event

Browser support:
Occurs when the mouse wheel rolls.
To get the distance that the mouse wheel rolled, use the wheelDelta event property.
In Firefox, use the DOMMouseScroll event and the detail event property instead.
Note: the onmousewheel and DOMMouseScroll events are also fired on elements that have no scrollbar or when the contents are not scrolled. If you would like to receive a notification when the contents of an element are scrolled, use the onscroll event.

How to register:

In HTML:
<ELEMENT onmousewheel="handler">

In JavaScript:
object.onmousewheel = handler;
object.addEventListener ("mousewheel", handler, useCapture);
9
object.attachEvent ("onmousewheel", handler);
You can find the related objects in the Supported by objects section below.
The event object is accessible to all event handlers in all browsers. The properties of the event object contain additional information about the current event. To get further details about these properties and the possible event handler registration methods, please see the page for the event object.
For a complete list of events, see the page for Events in JavaScript.

Basic information:

Bubbles Yes
Cancelable Yes
Event object
MouseWheelEvent
9
MouseEvent
WheelEvent

Actions that invoke the onmousewheel event:

  • Rolling the mouse wheel over an element.

The order of events related to the onmousewheel event:

Internet Explorer, Opera, Google Chrome, Safari Firefox
  1. onmousewheel
  2. onscroll
  1. DOMMouseScroll
  2. onscroll

Example HTML code 1:

This example implements a cross-browser solution to get the roll amount:
<head>
    <script type="text/javascript">
        function MouseScroll (event) {
            var rolled = 0;
            if ('wheelDelta' in event) {
                rolled = event.wheelDelta;
            }
            else {  // Firefox
                    // The measurement units of the detail and wheelDelta properties are different.
                rolled = -40 * event.detail;
            }
            
            var info = document.getElementById ("info");
            info.innerHTML = rolled;
        }

        function Init () {
                // for mouse scrolling in Firefox
            var elem = document.getElementById ("myDiv");
            if (elem.addEventListener) {    // all browsers except IE before version 9
                    // Internet Explorer, Opera, Google Chrome and Safari
                elem.addEventListener ("mousewheel", MouseScroll, false);
                    // Firefox
                elem.addEventListener ("DOMMouseScroll", MouseScroll, false);
            }
            else {
                if (elem.attachEvent) { // IE before version 9
                    elem.attachEvent ("onmousewheel", MouseScroll);
                }
            }
        }
    </script>
</head>
<body onload="Init ();">
    Use the mouse wheel on the field below.
    <div id="myDiv" style="width:200px; height:200px; overflow:auto;">
        <div style="height:2000px; background-color:#a08080;"></div>
    </div>
    <br />
    The last roll amount: <span id="info" style="background-color:#e0e0d0;"></span>
</body>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content