How to use onmousewheel in html5

This article mainly introduces how to use onmousewheel in html5. It is very detailed and has a certain reference value. Friends who are interested must finish it!

Wheel events are slightly different from browser to browser. One such as Firefox uses DOMMouseScroll, ff can also use the addEventListener method to bind DomMouseScroll events, and other browser wheel events use mousewheel.

Firefox uses DOMMouseScroll and other browsers use mousewheel. Firefox uses the detail property to capture wheel information when the scrolling event is triggered, and other browsers use wheelDelta. I don't know why other manufacturers are so consistent with Microsoft on this issue. Firefox can bind DomMouseScroll events using the addEventListener method.

Elem.addEventListener ('DOMMouseScroll', func, false); IE and other major browsers can use the traditional event binding model. But don't use IE's proprietary attachEvent method, which is not recognized by other major browsers.

Firefox mouse wheel scroll up is-3, scroll down is 3

IE mouse wheel scrolls up to 120 and scrolls down to-120

The Safari mouse wheel scrolls up to 360 and scrolls down to-360

Opera mouse wheel scrolls up to 120 and scrolls down to-120

Chrome mouse wheel scrolls up to 120 and scrolls down to-120

Someone did some tests under Safari: "if you just scroll around, the value is +-0.1. if you scroll a little faster (a few more turns), this value will also become larger. This is because there is mouse wheel acceleration under Mac OS. Once, the browser scrolls 1 pixel, scrolls 3 times, but the browser scrolls 30 pixels." At the same time, he also studied Camino (Gecko-based kernel engine): "similar to Safari (+-0.3 to +-Infinity), although it uses the same kernel engine as firefox, it turns out that the Delta value only fluctuates in +-2.666666, regardless of scrolling speed."

I have tested that IE/Opera belongs to the same type, and you can add wheel events by using attachEvent.

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

Firefox uses addEventListener to add wheel events

/ * Firefox registration event * / if (document.addEventListener) {document.addEventListener ('DOMMouseScroll',scrollFunc,false);}

Safari and Chrome belong to the same type, and events can be added using HTML DOM.

_ window.onmousewheel=_document.onmousewheel=scrollFunc;//IE/Opera/Chrome

With the exception of Firefox, events can be added using HTML DOM, so add events in the following ways

/ * Registration event * / if (document.addEventListener) {document.addEventListener ('DOMMouseScroll',scrollFunc,false);} / / W3C _ window.onmousewheel=_document.onmousewheel=scrollFunc;//IE/Opera/Chrome above is all the content of the article "how to use onmousewheel in html5". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!