Details about scroll wheel events in JS

(For the following content, refer to the http://adomas.org/javascript-mouse-wheel)

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;
14
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;
21}
22 scrolltext (direct );
23}
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

Chrome

Firefox

IE (8)

IE (6)

 

Opera

Safari