一.用法:
- 调用addScrollListener(),传入要监听的对象
- 在scrollHandle() 中编写相应处理函数
注:除了window、document 外,其他对象都阻止了默认滚动行为。
二.代码:
// 为某个对象添加滚动监听事件(传入要监听的对象)
function addScrollListener(obj) {
if (obj.addEventListener) {
// Firefox
obj.addEventListener('DOMMouseScroll', wheel, false)
}
// IE/Chrome/Opera
// window.onmousewheel = document.onmousewheel = wheel
obj.onmousewheel = wheel
}
// 统一处理滚轮滚动事件
function wheel(event) {
event = event || window.event // 解决IE8兼容性问题
var flag = 0
if (event.wheelDelta) {
// IE、Chrome、Opera浏览器使用的是wheelDelta(向下为-120或-150,向上为120或150)
flag = event.wheelDelta
} else if (event.detail) {
// Firefox使用的是detail(向下为3,向上为-3,因此取反与其他浏览器保持一致)
flag = - event.detail
}
// 调用对应处理函数
if (flag) scrollHandle(flag)
// 阻止浏览器的默认滚动行为; 若监听的是window/document,则不阻止
if(event.target !== document.body){
event.preventDefault && event.preventDefault()
return false // 兼容IE8
}
}
// 分别编写向上、向下滚动时对应的处理函数
function scrollHandle(flag) {
if (flag < 0) {
// 向下滚动
} else {
// 向上滚动
}
}