RollerEventThere will be a little difference in different browsers. One like Firefox uses DOMMouseScroll. ff can also use the addEventListener method to bind the DomMouseScroll event. Other browsers use mousewheel for wheel events. I will do it below. Let me give you a detailed introduction.
Firefox uses DOMMouseScroll, other browsers use mousewheel. When a scroll event is triggered, Firefox uses detailproperty to capture the wheel information, and other browsers use wheelDelta. I don’t know why other manufacturers 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. But don't use IE's proprietary attachEvent method. Other mainstream browsers do not recognize Microsoft's method.
Firefox mouse wheel scrolling up is -3, scrolling down is 3
IE mouse wheel scrolling up is 120, scrolling down is -120
Safari mouse wheel up Scroll is 360, scroll down is -360
Opera mouse wheel scroll up is 120, scroll down is -120
Chrome mouse wheel scroll up is 120, scroll down is -120
Someone did some tests under Safari: "If you just scroll once, the value is +-0.1. If you scroll a little faster (scroll a few more times), this value will also become larger. This This is because there is a mouse wheel acceleration function under Mac OS. When you scroll once, the browser scrolls 1 pixel, and when you scroll three times, the browser scrolls 30 pixels." At the same time, he also conducted research on Camino (a kernel engine based on Gecko): "Similar to Safari (+- 0.3 to +-Infinity), although it uses the same kernel engine as firefox, the delta value is only +-2.666666 Floating, regardless of the scrolling speed
After my test, IE/Opera are of the same type, and you can add wheel events using attachEvent
/*IE注册事件*/ if(document.attachEvent){ document.attachEvent('onmousewheel',scrollFunc); }
Firefox uses addEventListener to add. Scroll wheel event
/*Firefox注册事件*/ if(document.addEventListener){ document.addEventListener('DOMMouseScroll',scrollFunc,false); }
Safari and Chrome are of the same type. You can use HTML DOM to add events
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome
Except Firefox, all others can use HTML DOM to add events, so add events using the following method
/*注册事件*/ if(document.addEventListener){ document.addEventListener('DOMMouseScroll',scrollFunc,false); }//W3C window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome
The above is the detailed content of The event onmousewheel of the script that runs when the mouse wheel is being scrolled in html5. For more information, please follow other related articles on the PHP Chinese website!