In order to access this site you need to enable JavaScript!

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:

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
onmousewheel onscroll	DOMMouseScroll 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>