How to handle the mouse wheel event onmousewheel in html

The scroll wheel event is slightly different in different browsers. One such as Firefox uses DOMMouseScroll. ff can also use the addEventListener method to bind the DomMouseScroll event. Other browser wheel events use mousewheel. Let me introduce it to you in detail.

Firefox uses DOMMouseScroll, other browsers use mousewheel. When a scroll event is triggered, Firefox uses the detail attribute 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 scrolling up is 360, scrolling down is -360

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

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

Someone did some testing under Safari: "If you just scroll a circle, the value is +-0.1, if you scroll a little faster (scroll a few more times), this value will become larger. This is because there is a mouse wheel acceleration function under Mac OS. When you scroll once, the browser scrolls 1 pixel and scrolls 3 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 Float, no matter what the scrolling speed is

After my test, IE/Opera are of the same type. Use attachEvent to add the wheel event

/*IE注册事件*/ 
if(document.attachEvent){ 
  document.attachEvent('onmousewheel',scrollFunc); 
}

Firefox uses addEventListener to add the wheel event

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

Safari and Chrome are of the same type, and you can use HTML DOM to add events

window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome

Except Firefox, all of them can use HTML DOM to add events. Therefore, when adding events, use the following method

/*注册事件*/ 
if(document.addEventListener){ 
  document.addEventListener('DOMMouseScroll',scrollFunc,false); 
}//W3C 
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome

detail and wheelDelta

Judge whether the wheel is up or down. Compatibility must also be considered in the browser. Now in the five major browsers (IE, Opera, Safari, Firefox, Chrome) Firefox uses detail, and the other four categories use wheelDelta; the two are only inconsistent in their values, which means they have the same meaning. detail and wheelDelta only take two values ​​each, detail only takes ±3, and wheelDelta only takes ±120, where positive numbers are expressed as Up, negative numbers mean down

<p style="border-width:0px; padding-top:0px; padding-bottom:0px; margin-top:0px; margin-bottom:8px; list-style:none; text-indent:2em"><label for="wheelDelta"> 滚动值:</label>(IE/Opera)<input type="text" id="wheelDelta" style="border-width:0px; padding-top:0px; padding-bottom:0px; margin:0px; list-style:none"></p>
<p style="border-width:0px; padding-top:0px; padding-bottom:0px; margin-top:0px; margin-bottom:8px; list-style:none; text-indent:2em"><label for="detail"> 滚动值:(Firefox)</label><input type="text" id="detail" style="border-width:0px; padding-top:0px; padding-bottom:0px; margin:0px; list-style:none"></p>
<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);
  }
  /*注册事件*/
  if (document.addEventListener) {
    document.addEventListener(&#39;DOMMouseScroll&#39;, scrollFunc, false);
  }//W3C 
  window.onmousewheel = document.onmousewheel = scrollFunc; //IE/Opera/Chrome/Safari 
<p></script></p>