<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
/* 判断滚轮向上或向下，在浏览器中要考虑兼容性，现在五大浏览器（IE， Chrome， Firefox， Safari， Opera）中Firefox使用detail，其余四类使用WheelDelta；两者只在取值上不一致，代表含义一致，正数表示向上，负数表示向下 */
// 滚轮事件（不包括火狐）
// document.onmousewheel = function(){
// alert("触发滚轮事件");
// }
// 兼容火狐 使用addEventListener添加
// DOMMouseScroll
// 浏览器嗅探，判断是否是Firefox
var bol = window.navigator.userAgent.indexOf("FireFox") == -1;
if (bol) {
// 非火狐浏览器
document.onmousewheel = function(){
alert("滚轮事件,非火狐");
console.log(event);
// event.wheelDelta 表示滚轮方向，为正向上滚，为负向下滚
if (event.wheelDelta > 0) {
alert("向上滚");
}else{
alert("向下滚");
}
}
}else{
// 兼容火狐 使用addEventListener添加
// DOMMouseScroll
// 浏览器嗅探，判断是否是Firefox
// addEventListener方法，有三个参数，参数一：event事件，参数二：回调函数，参数三：Boolean类型值，表示事件是冒泡还是捕获
document.addEventListener("DOMMouseScroll",function(){
alert("火狐滚轮事件");
});
}
</script>
</body>
</html>
扫一扫
284
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
