Onmousewheel processing of the scroll wheel event in HTML

Onmousewheel processing of the scroll wheel event in HTML

Scroll wheel eventThere is a little difference between different browsers. For example, if Firefox uses DOMMouseScroll, ff can also be bound using the addEventListener method.DomMouseScrollEvents, other browser scroll events useMousewheelNext, let me introduce it to you in detail.

Firefox uses DOMMouseScroll, while other browsers use mousewheel. When a rolling event is triggered, Firefox uses the detail attribute to capture the scroll wheel information. other browsers use the wheelDelta attribute. I do not know why other vendors are so consistent with Microsoft on this issue. Firefox can use the addEventListener method to bind the DomMouseScroll event.

Elem. addEventListener ('dommousescroll ', func, false); IE and other mainstream browsers can use the traditional event binding model. However, do not use the proprietary attachEvent method of IE. Other mainstream browsers do not recognize Microsoft's method.

? Firefox scroll up to-3, scroll down to 3
? IE: Scroll up to 120, scroll down to-120
? Safari scroll up to 360, scroll down to-360
? The scroll wheel of Opera scroll up is 120, and the scroll down is-120.
? Chrome scroll wheel is 120 up, scroll down is-120
Someone has done some tests in Safari: "If you just scroll around, the value is +-0.1. If you scroll down a little faster (scroll several more times ), this value will also increase. This is because the mouse wheel acceleration function is available in Mac OS. Scroll once, the browser scrolls 1 pixel, and 3 times, but the browser scrolls 30 pixels ". He also studied Camino (Gecko-based kernel engine): "similar to Safari (+-0.3 to +-Infinity), although it uses the same kernel engine as firefox, however, the delta value is only floating in +-2.666666, regardless of the rolling speed.

I tested that IE/Opera belongs to the same type and can be added using attachEvent.Scroll wheel event.

/* IE registration event */if (document. attachEvent) {document. attachEvent ('onmousewheel ', scrollFunc );}

Use Firefox AddEventListenerAdd 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);} // 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.

Scroll value:(IE/Opera)
Scroll value: (Firefox)
<Script type = "text/javascript"> var oTxt = document. getElementById ("txt"); var scrollFunc = function (e) {var direct = 0; ee = 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);} // W3C window. onmousewheel = document. onmousewheel = scrollFunc; // IE/Opera/Chrome/Safari </script>