Mouse Wheel Programming In JavaScript

注：在JS编程当中经常会用到鼠标滚轮事件，但是要实现这个效果不得不考虑兼容情况

罗列一下存在的兼容性问题：

1、事件对象兼容，IE是window.event，而FF只需要传个参数（event）就行

2、滚轮事件：IE/Chrome 使用onmousewheel，而FF就独树一帜，使用DOMMouseScroll

3、获取滚轮的值：IE/Chrome使用onmousewheel的事件对象event的wheelDelta，而FF采用的是detail

4、IE/Chrome向上滚动为120，向下滚动为-120；FF向上滚动为-3，向下滚动为3

至于其他浏览器：如Opera，Safari本人没有测试，查资料（传送门）得知，和IE/Chrome一样，只有FF独特

废话不多说，贴码

HTML

<label for="wheelDelta">滚动值:</label><input type="text" id="Delta" />

JavaScript

var oDelta=document.getElementById('Delta');
var num=0;
function mouseScroll(e){
    //事件对象兼容
    var e=e||window.event;
    var down=null;
    if(e.wheelDelta){
        down=e.wheelDelta;//IE,Chrome
    }else{
        down=-e.detail;//FF,注意负号
    }
    counter(down);
}

//添加事件
if(document.addEventListener){document.addEventListener("DOMMouseScroll",mouseScroll,false);}//FF
document.onmousewheel=mouseScroll;//IE/Chrome

//计数
function counter(count){
    if(count>0){
        oDelta.value=num++;
    }else if(count<0){
        oDelta.value=num--;
    }
}

PS：由于时间原因，没有加上阻止默认行为，有需要可以自己加上