JS鼠标滚轮事件解析

一、不同浏览器的鼠标滚轮事件

首先，不同的浏览器有不同的滚轮事件。主要是有两种，onmousewheel（IE/Opera/Chrome支持，firefox不支持）和DOMMouseScroll（只有firefox支持）

另外在操作的过程中需要添加事件监听，兼容性写法

代码如下：

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

二、通过js事件event对象的返回数值判断滚轮上下

判断滚轮向上或向下在浏览器中也要考虑兼容性，现在五大浏览器（IE、Opera、Safari、Firefox、Chrome）中Firefox 使用detail，其余四类使用wheelDelta；

两者只在取值上不一致，代表含义一致，detail与wheelDelta只各取两个值，detail只取±3，wheelDelta只取±120，其中正数表示为向上，负数表示向下。

代码如下：

<label for="wheelDelta">滚动值:</label>(IE/Opera)<input type="text" id="wheelDelta"/>
<label for="detail">滚动值:(Firefox)</label><input type="text" id="detail"/>
<script type="text/javascript">
　　var scrollFunc = function(e){
    　　e = 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;
    　　}
　　}
　　/*注册事件*/
　　if(document.addEventListener){
    　　document.addEventListener('DOMMouseScroll',scrollFunc,false); // W3C
　　}
　　window.onmousewheel=document.onmousewheel=scrollFunc;             // IE/Opera/Chrome
</script>

效果如下：

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAjcAAAAmCAYAAAA4Pbq5AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAk+SURBVHhe7ZzNceM4EIWVkS5ORydnMRno4Fx0cSY6TTJcoNEg+g+gpIFFF/d9VdgZUiDQAPs9NmXPnhYAAAAAgAOB4gYAAAAAhwLFDQAAAAAOBYobAAAAABwKFDcAAAAAOBQobgAAAABwKFDcAMWfP3/Q0KY0cDyi+4yG9kr7aVDcAMU7kg4cH+TRMcF9BTNAcQPeDswLzAB5dExwX8EMUNyAtwPzAjNAHh0T3Fcwg12Lm9vltJyvdz6y3Jfr+bScztf0t1e5LZfTeelOwfTiGMcHXgXmBWbQz6MN3d+vy/n0j9q+XR7wpl4cj/nS/xX4A5jBjsXNfbnfismcLjc6k4uJUz7eaNWU7tfz8PPHTCT3OS0cguL14kbPS+sSE/TiXpsLJo93Sf/V+P3yffbH3wOYF5hBN4/u9+XGGitSKhrXWolazVN+sep+nnikuMl9Qk16TTwKeUf1Bxo/irO01i0dO095Bbkvc7xGrYeBP4AZ7FjcVIrxqPxOopVFRRbAjCIjpJoUv81Zg4jaViy2KIqLmyfMIceoN6iYtTHXWjRN8bGZ1D3mQ5gXmMFmHtHDX+vsdpF+kB/WrxUZNqcjqg9UXW63jVjIo8R6aH0vxv8CT/vWQ5SCSXoW/AHM4BcUN5oioHNK9qbYexKx/IZnExK9NY7W5DC2EJGMPusSGmqaV0z6rEnk/i0Ofnvq7cWbDe8xtIHBvMAMnssj1s056W7Vxj3J5bkXAtKy8ZPWpKZHL1avfHNT4ld+dIjiJpHXgZcfMJndihsSinIUNp9VrNYA4m8rhtCbjh+jTWuPNVvFDa3BxGMLmcy/FTd5X8QaNg2N97HOV/eg/giQm19z3f/aTHz81nil2PXnzvCDeyT3CuYFZhDnUcljld/1W9mal+ZhWjT13IuM0z6NITRjjxVbxU1Zg4rHeVli0wsKyn8GOi6+xBpOTe6h1fgaW93b2uSe1M/UzYh8XPvwtj/8Xb4+xJynj+XrL38EALNfcZMSXyW5MoNA3IQwLjakuLHgnSFoEVUxr9objlma0qkjLpb+qbjJaxBG4Ew1QPVZzUfsA6+zhcSFjZ1HXlPHMXPT2tQ5Ni+7CeJeoLgBM+gVN/drye/qH/7hLj2BofNFk/ZBrhrnutNh4F9S48MxqY39INQ9zRmsxeDXn47NWD29Sw8ufUSc7COtj/cRG2PZB79WGeOmP/z9Wj4+v/kgH34sp4+vVPIA0NituCmIYkWgxJhk8Mhbjh2DEIZVkMUHP4TX43wqCdEayMpgnkrHbPR6cljZJMrcUVNz5DHFCRqrG2NBmVBgUhk1Thg3G1Wdm8fR6x8Ucy7G1hfFDZjBMI+c9jMmX4d6T4RjFEhjMvFJQ9yX/p613K7NmvAva8xgnoLRYiXUrUf5z0DHNj5bzOjjTkzB+Ksf8L7YSzI0Nt+Lp/0hFzunz6WVOwDsXtx4Rg9GJ6RMFlPPoKThEHmcYgbFnC7e7PI8gxaFULFmUFHmkuj1i8jXyjnj/dGo8clsAgMUe9MbUxpOd5wVvke1ufGKGWYDRXEDZvBcHsUP8KKD/gO3V5BYTdM4lPP8EpS8RWqc+kt9uDbyg3HsUZN9VayRjmmcQNumr/atTky8frU3NA7HFm10RvjRs/7w/XlaPvBzKWD4VcXNtgF4MeVryrn28KyQGJ3IilhvyXxuLNC1y2pQEWxaHW1mtPgb1gh7/Tw5Pt2Pru3GWFB9ekWJMJPhvm+Mo67lvnTOxdhMD8UNmMHjeVR0rvLaNZvb+Ro+53Lfe0HTXLoufyD0lWk+FUDjj/ygxO+u7xUlBuU/kY5pHLsftbW+2rdKTHIPCkFxkyg+MYhVrEXeV/qR0xqL/t2a9hl+5wZ49i1ueg/eRH1oakFnQUkTMMfKJHyx4+czAh2KvDQv5kavaFHmkuj1c+R4bZGwaWjGXDp7LGOg+FwxYojGoXN+T+Lx2v1AcQNmMMqjVmxYiuadhrKuZCKbYxpvoCk3H+m0abz6Wb+N/KDE/LPFzfY42rc6MQmdr9D4vM6ez4j9etofvj/TtfixFNDsW9zkhHbJzuZD57NQWHTrgzSd5QuyaKuIpHnQOSGWFSfsoLjpiY9iGRc3ZU5vEspcEtok+uR+PfNQRiyxMfC+2XFkTL14HjNFe528f5K21yhuwAxGeSS9YYXylc/nfOYcXfM/GUu5IudqzXXOZ2rlnNVzhsaQOW+0EcZTIW2N/KCj+Y7fWDZ1zB5hh7dr0D7RicmNxfuXT/Bn0T7I/XvaH+h3bvDtDdDsWtxQQq8q8CZSqOdjQdaCpg2TBHm+LBf79pAxYq1jq2vFmFFroo0w4zHWDLVJ9BCFnYP3xBQQZVwz/7pPYixnimxUzpxFHxonvgdyn2mtNJ9Zn7gexQ2YQT+PSj6HunY5bs4lqo5sHlOBcsn/zy2jg4TVeBlbX9vGjNrYD+TDf8XpOEbFFuk4UdYszxePkdp2vsX71/p4H7HX+HkKMsZNf/j+XMQ/lsK/lgIhOxY3zYCq8EtuZ1HZ5I8f5j1ovKCvEyePu3pSFmt3DmOYCRrP9FdGwthzJY6y5rjlGHNsY8Or+6avM3ABcrmWP0u/yBDZmHp9OqZIe7Zek1paZ2Rgcq9Q3IAZdPOIcrVqKOcl6yLSt3tAjyjj+b6sHal7GrfpMWu1O8cab6WMp/pH+qM5Ii1rlP/0dJywvmTjLZ8bj6Hx2jV+D+w41WfkONqHN/2BvqkRc+JHUiBgv+KmK7Kc6OflzA9aJQwWixKQxZiKFZ++tIqqmuCDrVsAJez8e8PrH23Zz6MLQxQ3YAa9PJKFtCJr85y8hXSsvae+KIytJfURHXQxYDRffaB61oOtWwBFBc9RoPvS7hf8Acxgv+LGJPTKWx/G+o1hFsO3tHfzG4obmBf4AXp51NNf+M3DT1GLGz6cAmn5F704TUG/+GTgD2AG+xU3h6Z8+/Qr6pvdixu/FzAvMIP/Yx5Rgbbrm8pcovXAH8AMUNyAtwPzAjNAHh0T3FcwAxQ34O3AvMAMkEfHBPcVzADFDXg7OenQ0GY0cDyi+4yG9kr7aVDcAAAAAOBQoLgBAAAAwKFAcQMAAACAQ4HiBgAAAACHAsUNAAAAAA4FihsAAAAAHAoUNwAAAAA4FChuAAAAAHAoUNwAAAAA4EAsy3+OWPQleQM/CQAAAABJRU5ErkJggg==" alt="" />aaarticlea/png;base64,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" alt="" />

通过运行上述代码我们可以看到：

在非firefox浏览器中，滚轮向上滚动返回的数值是120，向下滚动返回-120。
而在firefox浏览器中，滚轮向上滚动返回的数值是-3，向下滚动返回3

代码部分如下，e.wheelDelta是判断是否为非firefox浏览器，e.detail为firefox浏览器

if(e.wheelDelta){   // IE/Opera/Chrome
    t1.value=e.wheelDelta;
}else if(e.detail){ // Firefox
    t2.value=e.detail;
}