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

You are here: Reference > JavaScript > client-side > event handling > properties > wheelDelta (event)

wheelDelta property (event)

Browser support:

Returns an integer value indicating the distance that the mouse wheel rolled.

Negative values mean the mouse wheel rolled down. The returned value is always a multiple of 120.

The wheelDelta property can be used in case of onmousewheel events.

Use the event.detail property and the DOMMouseScroll event to get the roll amount in Firefox. The measurement units of the detail and wheelDelta properties are different. See the example below for details.

Note that the number of scrolled pixels can be different for the same roll amount in different browsers.

Syntax:

object.wheelDelta;

You can find the related objects in the Supported by objects section below.

This property is read-only.

Possible values:

Integer that represents the roll amount.

Default: this property has no default value.

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>