火狐浏览器使用DOMMouseScroll，其他浏览器都是用mousewheel
火狐有个特殊属性event.detail，表示滚动的值 正数：向下滚动，负数：向上滚动
其他浏览器，通过event.wheelDelta获取滚动值 正数：向上滚动，负数：向下滚动 滚动一次值120
兼容性处理示例
window.onload=function(){ //获取dom元素 var content = document.querySelector("#content"); var cLiNodes = document.querySelectorAll("#content .con > li"); //内容区中li标签下标 var pageIndex = 0 ; //定时器 var timer = 0 ; //5.监听鼠标滚轮滚动事件.滚轮滚动时切屏，需要做浏览器兼容处理 /* FF火狐使用DOMMouseScroll，其他浏览器都是用mousewheel FF下有个特殊属性event.detail，表示滚动的值 event.detail 正数：向下滚动，负数：向上滚动 其他浏览器，通过event.wheelDelta获取滚动值 正数：向上滚动，负数：向下滚动 滚动一次值120 */ //5.1如果是火狐浏览器 if(content.addEventListener){ // content.addEventListener("DOMMouseScroll",fn); // console.log('火狐') //通过定制器保证一段时间内切屏效果只发生一次，防止用户滚动滑轮太快 content.addEventListener("DOMMouseScroll",function(ev){ ev=ev||event; //让fn的逻辑在DOMMouseScroll事件被频繁触发的时候只执行一次 clearTimeout(timer); timer = setTimeout(function(){ fn(ev) },200) }); } //5.2其他浏览器 // content.onmousewheel=fn ; //通过定制器保证一段时间内切屏效果只发生一次，防止用户滚动滑轮太快 content.onmousewheel=function(ev){ ev=ev||event; clearTimeout(timer); timer = setTimeout(function(){ fn(ev) },200) }; //5.3事件函数 function fn(ev){ ev=ev||event; var dir=""; if(ev.wheelDelta){ dir = ev.wheelDelta>0?"up":"down"; }else if(ev.detail){ dir = ev.detail<0?"up":"down"; } switch (dir){ case "up": //向上滑动，屏下标变小 if(pageIndex>0){ pageIndex--; move(pageIndex); } break; case "down": //向下滑动，屏下标变大 if(pageIndex<cLiNodes.length-1){ pageIndex++; move(pageIndex); } break; } } }
参考
https://blog.csdn.net/spy19881201/article/details/38704621
https://developer.mozilla.org/en-US/docs/Web/Events/DOMMouseScroll
https://developer.mozilla.org/en-US/docs/Web/Events/mousewheel
