主要知识点:
1、滚轮事件的应用代码
2、火狐浏览器与IE浏览器应用滚轮事件的区别。
火狐浏览器应用滚轮事件只能通过addEventListener(“DOMMouseScroll”,function,false).
3、e.wheelDelta > 0表示滚轮向上,反之向下。
e.detail < 0表示滚轮向下,反之向上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>mousewheel</title>
</head>
<body>
<div id="btn" style="width: 300px;height: 300px;background-color: yellow"></div>
<script type="text/javascript">
var btn = document.getElementById("btn");
btn.onmousewheel = function(e) {
var e = e || window.event;
if(e.wheelDelta > 0) {
alert("up")
}else {
alert("down")
}
console.log(e);
}
document.addEventListener("DOMMouseScroll",function(e) {
var e = e || window.event;
console.log(e);
if(e.detail < 0) {
alert("up")
}else {
alert("down");
}
},false)
</script>
</body>
</html>