JavaScript判断鼠标中键滑轮的上下滚动

我们现在操作电脑最常用的就是鼠标，对于鼠标来说，左右键的处理事件必不可少，但是鼠标中键的上下滚动也可以在页面中做出相当炫的效果。

那么使用JavaScript如何判断鼠标滑轮是向下还是向上滚动呢？

因为不同的浏览器有不同的滚轮事件。主要是有两种，onmousewheel（firefox不支持）和DOMMouseScroll（只有firefox支持），所以在这个过程中需要添加事件监听，代码如下：兼容firefox采用addEventListener监听。

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

另外判断滚轮的上下滚动在浏览器中也要考虑兼容性，现在五大浏览器（IE、Opera、 Safari、Firefox、Chrome）中Firefox 使用detail，其余四类使用wheelDelta；detail只取±3，wheelDelta只取±120。

具体的示例代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>鼠标的上下滑动</title>
</head>
<body>
<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>
</body>
</html>

运行结果如下：
谷歌：

IE：

Opera：

火狐：

通过运行结果可以得出：

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

所以在以后的运用中可以直接参照下面的代码，将鼠标上下移动之后需要执行的代码段镶嵌到相应的部分就可以了，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>  <meta charset="UTF-8"><title>判断鼠标是向上滑动还是向下滑动</title>  <style>div {height: 3000px;width: 100%;background: green;}</style>
</head>
<body>  <div></div> <script type="text/javascript">  var scrollFunc = function (e) {  e = e || window.event;  if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件               if (e.wheelDelta > 0) { //当滑轮向上滚动时执行的代码段 alert("滑轮向上滚动");  }  if (e.wheelDelta < 0) { //当滑轮向下滚动时执行的代码段   alert("滑轮向下滚动");  }  } else if (e.detail) {  //Firefox滑轮事件  if (e.detail < 0) { //当滑轮向上滚动时执行的代码段   alert("滑轮向上滚动");  }  if (e.detail > 0) { //当滑轮向下滚动时执行的代码段  alert("滑轮向下滚动");  }  }  }  //给页面绑定滑轮滚动事件  Firefoxif (document.addEventListener) {//firefox  document.addEventListener('DOMMouseScroll', scrollFunc, false);  }  //滚动滑轮触发scrollFunc方法 ie 谷歌  window.onmousewheel = document.onmousewheel = scrollFunc;   </script>
</body>
</html>

JavaScript判断鼠标中键滑轮的上下滚动相关推荐

Vue+JavaScript实现鼠标滑轮滑动控制元素横向滚动
实现列表跟随鼠标滑轮滑动横向滚动第一步:父元素设置为 overflow-x: scroll(竖向同理) .scroll-box{width: 1000px;overflow-x: scroll; ...
js实现判断鼠标滚轮的上下滚动
<script type="text/javascript"> var scrollFunc = function (e) { e = e || window.even ...
javascript 判断前端是 pc端还是移动端
javascript 判断前端是 pc端还是移动端 <!DOCTYPE html> <html lang="en"> <head>< ...
JavaScript判断浏览器类型及版本
JavaScript判断浏览器类型及版本你知道世界上有多少种浏览器吗?除了我们熟知的IE, Firefox, Opera, Safari四大浏览器之外,世界上还有近百种浏览器. 几天前,浏览器家族有 ...
javascript判断输入的值是不是正整数
转贴:2010年7月29日17:12:36 <script type="text/javascript"> /*判断文本框中输入的值是不是正整数*/ function ...
JavaScript判断是否是手机mobile登录
在页面代码中加入以下js,即可利用JavaScript判断是否是手机mobile登录! <script type="text/javascript" src="${ ...
php判断表单修改内容,JavaScript判断用户是否对表单进行了修改的方法_javascript技巧...
本文实例讲述了JavaScript判断用户是否对表单进行了修改的方法.分享给大家供大家参考.具体分析如下: 这段JS代码可以判断出用户是否对表单内容进行了修改,如果修改了表单,并退出浏览器,则会提醒用 ...
html中判断字段第一位,javascript判断字符串是否相等
javascript判断字符串是否相等的方法:可以使用==与===操作符判断两个字符串是否相等,==操作符在两个字符串类型不同时,会将类型转换为同一种进行判断.而===判断时若字符串类型不同就直接判断 ...
JavaScript判断设备类型加载对应网页并设置两端通用事件
JavaScript如何判断设备类型加载对应网页并设置通用事件基本思路: 在网页入口添加判断逻辑,如下:首先获取当前navigator对象的userAgent,通过userAgent判断当前设备类型 ...
html动画效果结束返回,javascript判断css3动画结束 css3动画结束的回调函数
本文主要给大家介绍的是如何使用javascript判断CSS3动画效果结束,主要是使用了javascript的回调函数,其思路是一旦动画或变换结束,回调函数就会触发.不再需要大型类库支持,非常的简单实 ...

JavaScript判断鼠标中键滑轮的上下滚动

JavaScript判断鼠标中键滑轮的上下滚动相关推荐

最新文章

热门文章