Saber 酱的抱枕

各个浏览器在鼠标滚轮事件上的兼容性问题简直可以让人抓狂。事件名、添加事件的方法、向上向下滚动的判断这三部分的兼容都存在差异。今天看到了一片文章——《JS事件-鼠标滚轮事件》，整理修改了一下，亲测有效。

function addEvent(obj,xEvent,fn) {//区别浏览器来添加鼠标滚轮事件
    if(obj.attachEvent){
        obj.attachEvent('on'+xEvent,fn);
    }else{
        obj.addEventListener(xEvent,fn,false);
    }
}  

var oDiv = document.body;
addEvent(oDiv,'mousewheel',onMouseWheel);
addEvent(oDiv,'DOMMouseScroll',onMouseWheel);

function onMouseWheel(ev) {//当鼠标滚动时执行
    var ev = ev || window.event;
    var down = true; // 定义一个标志，当滚轮向下滚时，执行一些操作
        down = ev.wheelDelta?ev.wheelDelta<0:ev.detail>0;
    if(down){
        alert("向下");
    }else{
        alert("向上");
    }
    /*下面这条语句可以阻止所有浏览器中的滚动条滚动
    if(ev.preventDefault){  //FF 和 Chrome
        ev.preventDefault();// 阻止默认事件
    }
    */
    //return false;//执行中出现return false语句会在IE8中阻止滚动条滚动，在其他浏览器中则需要上面的语句
}

第一部分和中间部分是给指定的元素添加鼠标滚动事件，第三部分是当鼠标滚动时要执行的代码。这里面判断鼠标方向和阻止浏览器默认行为的代码可以按需删改。

此代码在chromeV44、firefoxV39、IE11、IE8中测试通过。
Read More →

js中对鼠标滚动事件的兼容性处理