浏览器差异：firefox滚轮事件是DOMMouseScroll，其他浏览器使用的是mousewheel
firefox事件的event对象使用detail值表示滚轮反向，（-3）表示向上，（3）表示向下。
其他浏览器使用wheelDelta值表示表示滚轮方向，（120）表示向上， （-120）表示向下。
监听事件，删除监听事件：IE678使用attachEvent/detachEvent, 其他浏览器使用addEventListener/removeEventListener。
fixedEvent：判断滚轮方向
fixedFn：滚动滚轮取消滚轮的默认滚动网页行为
el.wheelHash：把fixedFn存放到对象的wheelHash属性
var mousewheel = (function(){var types =['DOMMouseScroll','mousewheel']
fixedEvent = function(e){
e.wheel = (e.wheelDelta? e.wheelDelta : -e.detail) > 0? 1 : -1// 通过事件判断鼠标滚轮反向，1是向上，-1是向下
e.wheelDir = e.wheel > 0? 'up' : 'down' //这个只是描述 e.wheel的值和滚轮方向的关系
return e
}
return{//返回mousewheel的方法
on: function(el, fn, preventDefault){ //mousewheel对象的on方法， el触发mousewheel事件对象，fn触发后执行函数，preventDefault是否阻止默认行为：滚轮的网页滚动效果
if(typeof preventDefault != 'boolean'){ //如果传入的实参preventDefault不是布尔值
preventDefault = true //初始化为true
}
var fixedFn = function(e){ //阻止默认行为函数
e = fixedEvent(e || window.event) // 兼容写法， 返回的e用来判断滚轮方向
if(preventDefault){ // 如果需要阻止默认行为
if(e.preventDefault){ //firefox
e.preventDefault()
}
else{
e.returnValue = false //ie
}
}
fn.call(el, e) //el事件对象调用fn函数，参数为e 注意fn中使用e.wheel去判断鼠标滚轮事件
},
wheelHash = el.wheelHash //把包含fixedFn函数的 el.wheelHash属性 赋值给 wheelHash
if(!wheelHash){ //判断函数是否存在 wheelHash 对象
wheelHsah = {}
wheelHash[fn] = fixedFn //wheelHash对象的属性fn为阻止默认行为函数
el.wheelHash = wheelHash //把wheelHash对象赋值给el的wheelHash属性 wheelHash[fn] == el.wheelHash[fn]
}else{
if(wheelHash[fn]) return //如果存在 wheelHash 且 wheelHash中有 fixedFn 那么返回
wheelHash[fn] = fixedFn //如果没有， 就把fixedFn赋值给wheelHash.fn
}
if(document.addEventListener){ //firefox
var i = types.length
while(i--){ //循环滚轮事件 数组
el.addEventListener(types[i], fixedFn, false) //firefox el监听滚轮事件，执行取消默认行为
}
}
else{ //ie
el.attachEvent('onmousewheel', fixedFn) // ie 监听事件， 处理函数fixedFn
}
},
//mousewheel中的on方法作用: 让元素监听事件，且处理是否执行默认行为。并且保存事件的阻止默认行为函数fixedFn到对象el.wheelHash属性中，
un: function(el, fn){
if(!el.wheelHash) return //如果对象不存在wheelHash, 直接跳出(没效果了)；
var wheelHash = el.wheelHash
if(document.removeEventListener){ //firefox
var i = types.length
while(i--){
el.removeEventListener(types[i],wheelHsah[fn], false) //删除监听事件，执行取消默认行为
}
}else{ //ie
el.detachEvent('onmousewheel', wheelHash[fn])
}
delete wheelHash[fn] //删除 默认行为函数
},
}
})()
//定义滚轮事件
// var myWheel = function(e){
// console.log(e.wheelDir)
// }
//添加滚轮事件
// mouseWheel.on(element, myWheel)
//删除滚轮事件
// mouseWheel.un(element, myWheel)
Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--> 1 <p><label for="wheelDelta"> 滚动值:</label>(IE/Opera)<input type="text" id="wheelDelta" /></p><p><label for="detail"> 滚动值:(Firefox)</label><input type="text" id="detail" /></p>
<script type="text/javascript">
var oTxt=document.getElementById("txt")
/***********************
* 函数：判断滚轮滚动方向
* 作者：walkingp
* 参数：event
* 返回：滚轮方向 1：向上 -1：向下
*************************/
var scrollFunc=function(e){
var direct=0
e=e || window.event
var t1=document.getElementById("wheelDelta")
var t2=document.getElementById("detail")
if(e.wheelDelta){//IE/Opera/Chrome
t1.value=e.wheelDelta
}else if(e.detail){//Firefox
t2.value=e.detail
}
ScrollText(direct)
}
/*注册事件*/
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false)
}//W3C
window.onmousewheel=document.onmousewheel=scrollFunc//IE/Opera/Chrome/Safari这里就是鼠标滚轮的事件~各个浏览器不太一样，这里做了兼容
</script>
