Mouse scroll event

This article mainly discusses compatibility issues.

After testing, 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 the event */If (document. addeventlistener) {document. addeventlistener ('domainscroll', scrollfunc, false);} // w3cwindow. 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.

Code highlighting produced by actipro codehighlighter (freeware) http://www.CodeHighlighter.com/--> 1 <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: determine the scroll wheel direction * parameter: Event * return: 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 event */If (document. addeventlistener) {document. addeventlistener ('domainscroll', scrollfunc, false);} // w3cwindow. onmousewheel = document. onmousewheel = scrollfunc; // IE/Opera/Chrome/Safari </SCRIPT>

 

Mouse scroll event