Home > Web Front-end > H5 Tutorial > body text

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

黄舟
Release: 2017-11-07 09:46:32
Original
2257 people have browsed it

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);  
}
Copy after login

Firefox uses addEventListener to add. Scroll wheel event

/*Firefox注册事件*/ 
if(document.addEventListener){  
  document.addEventListener('DOMMouseScroll',scrollFunc,false);  
}
Copy after login

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
Copy after login


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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template