js判断鼠标滚轮方向:js判断鼠标滚轮向下或向上滚动

发布时间:2020-09-15编辑:脚本学堂
有关js判断鼠标滚轮方向的例子,js脚本判断鼠标滚轮的当前方向,实时监测鼠标滚轮是向下或向上滚动,要注意firefox浏览器在判断方式与其它浏览器的不同。

js如何判断鼠标滚轮方向?

判断鼠标滚轮是向上或向下滚动,不同的浏览器的判别方式不同。

当前比较流行的浏览器有 IE,Opera,Safari,Firefox,Chrome,在这个问题上Firefox和其他浏览器的实现方式是不一样的。

例子,js检测鼠标滚轮方向。

复制代码 代码示例:
<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;
}