js 页面无滚动条添加滚轮事件

时间:2021-05-25 19:07:05

当页面无滚动条时,滑动滚轮时window.onscroll事件不会相应,此时应该去添加滚轮事件

var MouseWheelHandler=function(e){
e.preventDefault();
e=window.event||e;
var value;
if(e.wheelDelta)
value=e.wheelDelta;
else if(e.detail)
value=-e.detail;
}
var addMouseWheelHandler=function(){
if(document.attachEvent)
document.attachEvent('onmousewheel',MouseWheelHandler);
else if(document.addEventListener)
document.addEventListener('DOMMouseScroll',MouseWheelHandler,false);
else
document.addEventListener('mousewheel',MouseWheelHandler,false);
}
addMouseWheelHandler();

在IE、chrome、opera、safari、firefox中已测试chrome、ie、Firefox可用,

其中要注意的是,Firefox中是通过e.detail来判断滚轮方向,且e.detail=-3方向向上,e.detail=3方向向下

IE、chrome中通过e.wheelDelta判断滚轮方向,e.wheelDelta=120方向向上,e.wheelDelta=-120方向向下

但是,当页面有滚动条时要注意,原始的滚轮事件会失效