js下的鼠标滚动事件

我们在日常使用中会经常使事件用到鼠标滚轮，但是当我们想自定义鼠标滚轮事件时就会遇到一些麻烦--滚轮事件的兼容性有些独特。我们来看一下。

   /*
    *    滚轮事件
    *   onmousewheel
    *       兼容chrome和IE 不兼容火狐
    *    e.wheelDelta;
    *       记录滚动事件的方向
    *       负值是往后拉
    *       正值就是往前推
    *       为120的倍数
    **/
obj.onmousewheel =function (e) {
       //...
}

   /*
    *    滚轮事件
    *   DOMMouseScroll
    *       只支持火狐
    *    e.detail;
    *       记录滚动事件的方向
    *       正值是往后拉
    *       负值就是往前推
    *       为3的倍数
    **/
obj.DOMMouseScroll=function (e) {
       //...
}

这是我们在使用时就要注意这两种方法的差别，主要是滚动事件的方向记录。

1. 前滚后滚记录的正负值不同
2. 每次滚动记录的值得大小不同

所谓我们写兼容的时候要考虑这个问题
兼容写法：

function mousewheel(obj,fn) {
    function eFn(e) {
        e = e || window.event;
        if(fn.call(this,e,-e.wheelDelta/120||e.detail/3)===false)!-[1,]?e.returnValue=false:e.preventDefault();
}
    var eName = document.onmousewheel===null?"mousewheel":"DOMMouseScroll";
    document.addEventListener?obj.addEventListener(eName,eFn):obj.attachEvent("on"+eName,eFn)
   }
//添加事件
function addEvent(obj,eName,eFn) {
    if(obj.attachEvent){ //判断支不支持attacgevent方法，如果支持就是ie678
        obj.attachEvent("on"+eName,eFn) //兼容IE678
    }else{
        obj.addEventListener(eName,eFn)//兼容标准浏览器
    }
 }