一、原生js 实现：
var scrollFunc = function (e) {
e = e || window.event;
if (e.wheelDelta) { //判断浏览器IE，谷歌滑轮事件
if (e.wheelDelta > 0) { //当滑轮向上滚动时
alert('上滚')
}
if (e.wheelDelta < 0) { //当滑轮向下滚动时
alert('下滚')
}
} else if (e.detail) { //Firefox滑轮事件
if (e.detail> 0) { //当滑轮向下滚动时
alert('下滚')
}
if (e.detail< 0) { //当滑轮向上滚动时
alert('上滚')
}
}
}
/*IE、Opera注册事件*/
if(document.attachEvent){
document.attachEvent('onmousewheel',scrollFunc);
}
//Firefox使用addEventListener添加滚轮事件
if (document.addEventListener) {//firefox
document.addEventListener('DOMMouseScroll', scrollFunc, false);
}
//Safari与Chrome属于同一类型
window.onmousewheel = document.onmousewheel = scrollFunc;
/*
event.wheelDelta 滚动方向
上：120
下：-120
Firefox：event.detail 滚动方向
上：-3
下:3
*/
二、 JQ实现：
$(document).bind('mousewheel DOMMouseScroll',function(event){ //on也可以 bind监听
//Chorme
var wheel = event.originalEvent.wheelDelta;
var detal = event.originalEvent.detail;
if (event.originalEvent.wheelDelta) { //判断浏览器IE,谷歌滚轮事件
if (wheel > 0) { //当滑轮向上滚动时
alert('上滚')
}
if (wheel < 0) { //当滑轮向下滚动时
alert('下滚')
}
} else if (event.originalEvent.detail) { //Firefox滚轮事件
if (detal > 0) { //当滑轮向下滚动时
alert('下滚')
}
if (detal < 0) { //当滑轮向上滚动时
alert('上滚')
}
}
});