JavaScript 滚轮事件使用说明

不过遗憾的是各浏览器都不尽相同。

一) 事件名称不相同
IE, KHTML(Safari, Chrome), Opera对应的事件名称是 "mousewheel"。而 Gecko(Firefox, Netscape) 对应的事件名称是 "DOMMouseScroll"。

二) 事件对象的属性不一样
有时我们需要知道用户是向上滚了还是向下滚了。例如我们有一个响应滚动事件的函数:

function wheelHandle(e) { 
if(e.wheelDelta) {// IE, KHTML, Opera 
alert(e.wheelDelta > 0 ? '向上滚' : '向下滚'); 
} else { // Gecko 
alert(e.detail < 0 ? '向上滚' : '向下滚'); 
} 
}

IE, KHTML 支持 e.wheelDelta ,大于 0 为向上滚动，小于 0 为向下滚动。Gecko 支持 e.detail，小于 0 为向上滚动，大于 0 为向上滚动，跟前面的相反。而 Opera 比较牛，两种都支持。
下面给出一个注册滚轮事件的函数做参考：

/** 
* 注册滚轮事件函数 
* @param element : 注册的事件对象 
* @param wheelHandle : 注册事件函数 
*/ 
function addScrollListener(element, wheelHandle) { 
if(typeof element != 'object') return; 
if(typeof wheelHandle != 'function') return; 
// 监测浏览器 
if(typeof arguments.callee.browser == 'undefined') { 
var user = navigator.userAgent; 
var b = {}; 
b.opera = user.indexOf("Opera") > -1 && typeof window.opera == "object"; 
b.khtml = (user.indexOf("KHTML") > -1 || user.indexOf("AppleWebKit") > -1 || user.indexOf("Konqueror") > -1) && !b.opera; 
b.ie = user.indexOf("MSIE") > -1 && !b.opera; 
b.gecko = user.indexOf("Gecko") > -1 && !b.khtml; 
arguments.callee.browser = b; 
} 
if(element == window) 
element = document; 
if(arguments.callee.browser.ie) 
element.attachEvent('onmousewheel', wheelHandle); 
else 
element.addEventListener(arguments.callee.browser.gecko ? 'DOMMouseScroll' : 'mousewheel', wheelHandle, false); 
}

注册一个监听事件：

var display = document.getElementById('display'); 
function wheelHandle(e) { 
if(e.wheelDelta) {// IE, KHTML, Opera 
display.innerHTML = (e.wheelDelta > 0 ? '上' : '下'); 
} else { // Gecko 
display.innerHTML = (e.detail < 0 ? '上' : '下'); 
} 
} 
addScrollListener(window, wheelHandle);