Details about scroll wheel events in JS

Source: Internet
Author: User

(For the following content, refer to the

In the past, js-like Photoshop mouse wheel controls the input box, JavaScript has been used to control the mouse wheel events. The browser compatibility issues are considered in the scroll wheel events.

Additional event

I tested that IE/opera belongs to the same type. You can use attachevent to add scroll wheel events.

/* Ie registration event */If (document. attachevent ){

Document. attachevent ('onmousewheel ', scrollfunc );


Firefox uses addeventlistener to add scroll wheel events

/* 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:

/* 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.

1 <p> <label for = "wheeldelta"> scroll value: </label> (ie/opera) <input type = "text" id = "wheeldelta"/> </P>
2 <p> <label for = "detail"> scroll value: (Firefox) </label> <input type = "text" id = "detail"/> </P>
3 <SCRIPT type = "text/JavaScript">
4 var otxt = Document. getelementbyid ("TXT ");
5 /***********************
6 * function: Judge the scroll wheel direction
7 * Author: walkingp
8 * parameter: Event
9 * return: scroll wheel direction 1: Up-1: Down
10 *************************/
11 var scrollfunc = function (e ){
12 var direct = 0;
13 E = E | window. event;
15 var T1 = Document. getelementbyid ("wheeldelta ");
16 var t2 = Document. getelementbyid ("detail ");
17 if (E. wheeldelta) {// IE/Opera/chrome
18 t1.value = E. wheeldelta;
19} else if (E. Detail) {// Firefox
20 t2.value = E. detail;
22 scrolltext (direct );
24/* Registration event */
25 if (document. addeventlistener ){
26 document. addeventlistener ('dommousescroll', scrollfunc, false );
27} // W3C
28 window. onmousewheel = Document. onmousewheel = scrollfunc; // IE/Opera/Chrome/Safari
29 </SCRIPT>



Click Preview



IE (8)

IE (6)




Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.