Home > Developer > JavaScript
Additional event
I tested that IE/Opera belongs to the same type. You can use attachEvent to add scroll wheel events.
Copy codeThe Code is as follows:
/* IE registration event */
If (document. attachEvent ){
Document. attachEvent ('onmousewheel ', scrollFunc );
}
Firefox uses addEventListener to add scroll wheel events
Copy codeThe Code is as follows:
/* Firefox registration event */
If (document. addEventListener ){
Document. addEventListener ('dommousescroll', scrollFunc, false );
}
Safari and Chrome belong to the same type. You can use html dom to add events.
Window. onmousewheel = document. onmousewheel = scrollFunc; // IE/Opera/Chrome
Except Firefox, you can use html dom to add events. Therefore, the following method is used to add events:
Copy codeThe Code is as follows:
/* Register an event */
If (document. addEventListener ){
Document. addEventListener ('dommousescroll', scrollFunc, false );
} // W3C
Window. onmousewheel = document. onmousewheel = scrollFunc; // IE/Opera/Chrome
Detail and wheelDelta
Compatibility should also be considered when judging the scroll wheel up or down in the browser. In the five browsers (IE, Opera, Safari, Firefox, Chrome), Firefox uses detail, and the other four use wheelDelta; the two values are inconsistent, indicating the same meaning. detail and wheelDelta take only two values, detail take only ± 3, and wheelDelta take only ± 120, where positive numbers represent upward, negative number indicates downward.
Copy codeThe Code is as follows:
<P> <label for = "wheelDelta"> scroll value: </label> (IE/Opera) <input type = "text" id = "wheelDelta"/> </p>
<P> <label for = "detail"> scroll value: (Firefox) </label> <input type = "text" id = "detail"/> </p>
<Script type = "text/javascript">
Var oTxt = document. getElementById ("txt ");
/***********************
* Function: determines the scroll wheel direction.
* Author: walkingp
* Parameter: event
* Return value: scroll wheel direction 1: Up-1: Down
*************************/
Var scrollFunc = function (e ){
Var direct = 0;
E = e | window. event;
Var t1 = document. getElementById ("wheelDelta ");
Var t2 = document. getElementById ("detail ");
If (e. wheelDelta) {// IE/Opera/Chrome
T1.value = e. wheelDelta;
} Else if (e. detail) {// Firefox
T2.value = e. detail;
}
ScrollText (direct );
}
/* Register an event */
If (document. addEventListener ){
Document. addEventListener ('dommousescroll', scrollFunc, false );
} // W3C
Window. onmousewheel = document. onmousewheel = scrollFunc; // IE/Opera/Chrome/Safari </script>
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <pead> <meta http-equiv =" content-Type "content =" text/html; charset = gb2312 "/> <title> scroll wheel effect-http://www.jb51.net/</title> </pead> <body> <p> <label for =" wheelDelta "> scroll value: </label> (IE/Opera) <input type = "text" id = "wheelDelta"/> </p> <label for = "detail"> scroll value: (Firefox) </label> <input type = "text" id = "detail"/> </p> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Chrome
Firefox
IE (8)
IE (6)
Opera
Safari
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
