Firefox uses Dommousescroll, and other browsers use MouseWheel. When scrolling event triggers Firefox uses the Detail property to capture wheel information, and other browsers use Wheeldelta. I don't know why other vendors and Microsoft are so consistent on this issue. Firefox can bind Dommousescroll events using the AddEventListener method.
Elem.addeventlistener (' Dommousescroll ', Func, false); IE and other mainstream browsers can use the traditional event-binding model. But do not use IE proprietary attachevent method, other mainstream browsers do not recognize this method of Microsoft.
The code is as follows |
Copy Code |
<script type= "Text/javascript" > <! [cdata[ var mousewheel = document.getElementById (' MouseWheel '); if (Mousewheel.addeventlistener) { Mousewheel.addeventlistener (' Dommousescroll ', function (event) { Event.target.innerHTML = Event.detail; Event.stoppropagation (); Event.preventdefault (); }, False); } Mousewheel.onmousewheel = function (event) { Event = Event | | window.event; mousewheel.innerhtml = Event.wheeldelta; Event.returnvalue = false; } ]]> </script> |
The following conclusions are obtained after the test.
Firefox mouse wheel scroll Up is-3, scroll down is 3
IE mouse wheel scroll up is 120, scroll down is-120
Safari mouse wheel Scroll up is 360, scroll down is-360
Opera mouse wheel scroll up is 120, scroll down is-120
Chrome mouse wheel Scroll up is 120, scroll down is-120
Someone has done some tests under safari: "Just a lap, the value is +-0.1, if the scrolling slightly faster (more than a few laps), this value will become larger." This is because the mouse wheel acceleration function is available under Mac OS. Once scrolling, the browser scrolls 1 pixels, scrolling 3 times, and the browser scrolls 30 pixels. He also studied Camino (Gecko's kernel engine): "Like Safari (+-0.3 to +-infinity), while using the same kernel engine as Firefox, the delta value only floats in the +-2.666666, No matter how fast you scroll
Example 1 get the mouse roll rotation to determine the direction of scrolling
JavaScript gets the rotation of the mouse, where the value is only "1" and "1" two cases, please choose to press the middle wheel scrolling, activation can not press, direct scrolling. The program according to the value can determine the scroll wheel direction, roll up or down, in the writing JS game we want to use this function.
The code is as follows |
Copy Code |
<title>javascript to determine the scrolling direction of the mouse wheel-www.fengfly.com </title> < Script type= "Text/javascript" function handle (delta) { var s = Delta + ":"; if (Delta <0) s = "You are rolling down ..."; else s = "You are rolling up ..."; document.getElementById (' Delta '). InnerHTML = S; }//from www.fengfly.com Function Wheel (event) { var delta = 0; if (!event) event = window.event; if (Event.wheeldelta) { Delta = event.wheeldelta/120; if (window.opera) delta =-delta; else if (event.detail) { Delta =-EVENT.DETAIL/3; } if (Delta) Handle (delta); } if (Window.addeventlistener) Window.addeventlistener (' Dommousescroll ', wheel, false); Window.onmousewheel = Document.onmousewheel = wheel; </script> <body> <div id= "Delta" > Rolling in the round, please choose to press the middle wheel scrolling, after activation can not press, direct scrolling. </div> <p>shared by http://www.111cn.net</p> </body>
|