DOMMouseScroll event
Occurs when the mouse wheel rolls.
To get the distance that the mouse wheel rolled, use the detail event property.
In Internet Explorer, Opera, Google Chrome and Safari, use the onmousewheel event and the wheelDelta 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.addEventListener ("DOMMouseScroll", handler, useCapture);
This event cannot be registered in HTML.
In JavaScript:
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 | No | ||||||||||||||||||||||||
| Cancelable | No | ||||||||||||||||||||||||
| Event object |
|
Actions that invoke the DOMMouseScroll event:
- Rolling the mouse wheel over an element.
The order of events related to the DOMMouseScroll event:
| Internet Explorer, Opera, Google Chrome, Safari | Firefox |
|---|---|
|
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?
|
User Contributed Comments