The event onmousewheel of the script that runs when the mouse wheel is being scrolled in html5

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!