判断鼠标滚轮是向上或向下滚动,不同的浏览器的判别方式是不一样的,当前比较流行的浏览器有 IE,Opera,Safari,Firefox,Chrome,在这个问题上Firefox和其他浏览器的实现方式是不一样的。现在通过一个具体的示例来分析这个问题吧!
示例代码如下:
<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"> /*注册事件*/ if(document.addEventListener){ document.addEventListener('DOMMouseScroll',scrollFunc,false); }//W3C window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome 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; } } </script>
通过运行上述代码我们可以看到:
在 Firefox 中使用detail,其余浏览器使用的是wheelDelta;两者虽在取值上不一致,但实际意思是一样的,detail与wheelDelta只各取两个值,detail只取±3,wheelDelta只取±120,其中正数表示为向上,负数表示向下。
在非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; }