JavaScript中的鼠标滚轮事件详解

欢迎您访问我爱IT技术网，今天小编为你分享的编程技术是：【JavaScript中的鼠标滚轮事件详解】，下面是详细的分享！

JavaScript中的鼠标滚轮事件详解

if(document.addEventListener){ document.addEventListener('DOMMouseScroll',scrollFunc,false); }

Safari与Chrome属于同一类型，可使用HTML DOM方式添加事件

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

其中除Firefox外其余均可使用HTML DOM方式添加事件，因此添加事件使用以下方式

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

detail与wheelDelta

判断滚轮向上或向下在浏览器中也要考虑兼容性，现在五大浏览器（IE、Opera、Safari、Firefox、Chrome）中Firefox使用detail，其余四类使用wheelDelta；两者只在取值上不一致，代表含义一致，detail与wheelDelta只各取两个值，detail只取±3，wheelDelta只取±120，其中正数表示为向上，负数表示向下。

<p><label for="wheelDelta">滚动值:</label>(IE/Opera)<input type="text" id="wheelDelta" /></p> <p><label for="detail">滚动值:(Firefox)</label><input type="text" id="detail" /></p> <script type="text/javascript"> var oTxt=document.getElementById("txt"); var scrollFunc=function(e){ var direct=0; 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; } ScrollText(direct); } if(document.addEventListener){ document.addEventListener('DOMMouseScroll',scrollFunc,false); }//W3C window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome/Safari </script>

点击预览效果

Chrome

Firefox

IE(8)

IE(6)

Opera

Safari

以上所分享的是关于JavaScript中的鼠标滚轮事件详解，下面是编辑为你推荐的有价值的用户互动：

　　相关问题：js中鼠标滚轮事件分析，怎么判断鼠标向上滚还是向...

　　答： var a=document.body.scrollTop; function kk(){ var b=document.body.scrollTop; if(b>a){ alert("向下移动了"+(b-a)+"px"); }else{ alert("向上移动了"+(a-b)+"px"); } a=b; setTimeout("kk()",1000); } setTimeout("kk()",1000); >>详细

　　相关问题：请教一个鼠标滚轮事件的js

　　答：知道滚轮对应的事件就行了 mousewheel 和 DOMMouseScroll 两个不同实现 前者伟大的IE 后者 俺也不造 注意问题是： 鼠标移动到广告区域 滚动时 要阻止document的滚动【阻止冒泡可能能解决】 来自：老温PHP >>详细

　　相关问题：jQ中鼠标滚轮事件事件吗

　　答：jQuery 不直接支持鼠标滑轮事件，有一个插件叫做 jQuery Mousewheel，你可以 Google 一下 但用原生 JavaScript 也可以轻松来实现 // 鼠标滑轮滚动后执行的函数// delta > 0 = 向上滚动// delta < 0 = 向下滚动function mousewheelEvent(e, delta... >>详细