兼容谷歌和火狐的滚轮事件
程序员文章站
2022-04-09 17:34:09
谷歌向上滚动滚轮是正值，向下是负值，而火狐正好相反 完整测试代码，分别用谷歌和火狐浏览器测试 ......
谷歌向上滚动滚轮是正值，向下是负值，而火狐正好相反
完整测试代码，分别用谷歌和火狐浏览器测试
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
height: 0;
}
html,body{
height: 100%;
}
#app{
width: 100%;
height: 100%;
background: #008b8b;
}
</style>
</head>
<body>
<div id="app"></div>
<script>
window.onload = function(){
var appnode = document.queryselector("#app");
for(var i=0; i<200;i++){
appnode.innerhtml += "bear"+(i)+"<br>";
}
function fn(ev){
ev = ev || event;
//滚轮方向
var dir = "";
console.log("我是谷歌："+ ev.wheeldelta);
console.log("我是火狐："+ ev.detail);
if(ev.wheeldelta){
console.log(ev.wheeldelta);
if(ev.wheeldelta>0){
dir = "up";
}else if(ev.wheeldelta<0){
dir = "down";
}
}else if(ev.detail){
if(ev.detail>0){
dir = "down";
}else if(ev.detail<0){
dir = "up";
}
}
console.log(dir);
switch(dir){
case "up":
appnode.style.height = appnode.offsetheight - 10 + "px";
break;
case "down":
appnode.style.height = appnode.offsetheight + 10 + "px";
break;
}
ev.preventdefault();
}
// 谷歌
appnode.addeventlistener("mousewheel",fn);
// 火狐
appnode.addeventlistener("dommousescroll",fn);
}
</script>
</body>
</html>
推荐阅读