鼠標滾輪事件

//兼容性寫法，該函數也是網上別人寫的，不過找不到出處了，蠻好的，所有我也沒有必要修改了 //判斷鼠標滾輪滾動方向 if (window.addEventListener)//FF,火狐瀏覽器會識別該方法window.addEventListener('DOMMouseScroll', wheel, false); window.onmousewheel = document.onmousewheel = wheel;//W3C //統一處理滾輪滾動事件 function wheel(event){var delta = 0;if (!event) event = window.event;if (event.wheelDelta) {//IE、chrome瀏覽器使用的是wheelDelta，并且值為“正負120”delta = event.wheelDelta/120; if (window.opera) delta = -delta;//因為IE、chrome等向下滾動是負值，FF是正值，為了處理一致性，在此取反處理} else if (event.detail) {//FF瀏覽器使用的是detail,其值為“正負3”delta = -event.detail/3; }if (delta)handle(delta); } //上下滾動時的具體處理函數 function handle(delta) {if (delta <0){//向下滾動 }else{//向上滾動 }}

?IE、chrome監聽的是wheelDelta,向下滾動其值為-120；向上滾動其值為120

?FF監聽的是detail,向下滾動其值為3；向上滾動其值為-3

?

jQuery寫法

$(document).on('mousewheel DOMMouseScroll', onMouseScroll); function onMouseScroll(e){e.preventDefault();var wheel = e.originalEvent.wheelDelta || -e.originalEvent.detail;var delta = Math.max(-1, Math.min(1, wheel) );if(delta<0){//向下滾動console.log('向下滾動');}else{//向上滾動console.log('向上滾動');} }

?

其他瀏覽器未測試

同類文章

http://www.jb51.net/article/24831.htm

http://www.cnblogs.com/walkingp/archive/2010/02/03/1662872.html

?

轉載于:https://www.cnblogs.com/caoruiy/p/4694498.html

總結

以上是生活随笔為你收集整理的JS鼠标滚轮事件详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。