javascript鼠标滚动事件中出现的问题

</pre>滚动事件精简代码：<p></p><p></p><pre name="code" class="javascript">//鼠标滚轮事件
var box = document.getElementById("box");
var scrollFn = function(e){
e = e || window.event;
if(e.wheelDelta){                   // e.wheelDelta 兼容IE-Opera-Chrome
if(e.wheelDelta > 0){           //如果 e.wheelDelta > 0 在IE-Opera-Chrome下代表向上滚动“而火狐下代表向下滚动”
console.log("IE-Opera-Chrome向上滚动");
}else{
console.log("IE-Opera-Chrome向下滚动");  //e.wheelDelta < 0  则反之
}
}else if(e.detail){                 // e.detail 兼容Firefox
if(e.detail < 0){           // 为了兼容Firefox 和 IE-Opera-Chrome 在火狐下需要时应反着判断    e.detail < 0
console.log(e.detail+"Firefox向上滚动，");
}else{
console.log(e.detail+"Firefox向下滚动，");
}
}
}

//box为 “局部块” 的临时命名（需根据需求命名更改）
box.onmousemove = function(){

/*绑定事件*/
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFn,false);   // 绑定 Firefox 滚动事件
}
window.onmousewheel=document.onmousewheel=scrollFn;// 绑定 IE-Opera-Chrome 滚动事件

}

box.onmouseleave=function(){

/*解除事件*/
if(document.addEventListener){
document.removeEventListener('DOMMouseScroll',scrollFn,false);//解除 Firefox 滚动事件
}
window.onmousewheel=document.onmousewheel=null;// 解除 IE-Opera-Chrome 滚动事件

}

看似完成了滚动：

有时候我们会碰到这样的情况：

body内容超出了屏幕高度，自动出现滚动条，那么我们在滚动局部内容时，会同时触发到body的浏览器自带滚动，怎么办？？？

----------------------------------------------------------------------------------------------------------------------------------------------------------

解决办法如下：

IE-Opera-Chrome禁止浏览器默认滚动条：

getBody.onmousewheel=function(){                    //IE/Opera/Chrome禁止body滚动
return false;
}

IE-Opera-Chrome “解除”禁止浏览器默认滚动条：

getBody.onmousewheel=function(){                    //IE/Opera/Chrome 解除body滚动条
return true;
}

Firefox禁止浏览器默认滚动：
首先定义一个全局变量：

// 禁止火狐body默认滚动事件
var bodyMoveFun = function(e){
e.preventDefault();
}

再绑定禁止事件函数：

document.addEventListener("DOMMouseScroll",bodyMoveFun,false); //Firefox禁止body滚动

Firefox “解除”
禁止浏览器默认滚动：

document.removeEventListener('DOMMouseScroll',bodyMoveFun,false);//解除Firefox禁止body滚动

错误方法如下：

如果写成这样将会无法绑定和解除：

document.addEventListener("DOMMouseScroll",function(e){
<span style="white-space:pre">	</span>e.preventDefault();
},false);