javascript的滚轮事件
onmousewheel鼠标滚轮滚动事件（火狐不支持)
但是注意这个事件火狐不支持
document.onmousewheel = function (){
alert("我滚了");
}
event.wheelDelta判断鼠标滚轮方向(火狐不支持)
document.onmousewheel = function (event){
event = event || window.event //兼容IE8
//event.wheelDelta可以获取滚动方向，向上滚是正值，向下滚是负值
//event.wheelDelta不支持火狐
alert(event.wheelDelta);
event.wheelDelta>0?alert("向上滚"):alert("向下滚");
}
DOMMouseScroll鼠标滚动事件（火狐支持）
注意该事件要通过addEventListener()函数绑定
document.addEventListener("DOMMouseScroll",function(){
alert("我滚了")
},false);
event.detail判断鼠标滚轮方向(火狐支持)
document.addEventListener("DOMMouseScroll",function(event){
//event.detail可以获取滚动方向，向上滚是负值-3，向下滚是正值3
alert(event.detail);
event.detail>0?alert("向下滚"):alert("向上滚");
},false);
最后来个小栗子，实现div的高度可以随着鼠标滚轮像金箍棒一样伸缩
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: red;
touch-action: none;
}
body{
height: 1000px;
}
</style>
<body>
<div id="box1">
</div>
</body>
</html>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
};
window.onload = function(){
var box1 = $("box1")
box1.onmousewheel = function (event){
event = event || window.event //兼容IE8
//判断鼠标滚动方向
if(event.wheelDelta>0 ||event.detail<0){
//设置个最小高度免得滚不见了
if(box1.clientHeight<=10) return ;
//向上滚 变短10px
box1.style.height = box1.clientHeight - 10 +"px";
}else{
//向下滚 变长10px
box1.style.height = box1.clientHeight + 10 +"px";
}
/*
*当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动
*这是浏览器的默认行为，如果不希望发生，则可以取消默认行为
*1.{passive:false}与event.preventDefault()一起是阻止火狐的默认行为
*2.event.preventDefault()是阻止IE8以上的默认行为，return false 是是阻止IE8以下的默认行为
*3.css样式中touch-action是阻止谷歌的默认行为
*/
event.preventDefault && event.preventDefault();
return false;
}
//当浏览器是火狐浏览器时，回调与IE或谷歌浏览器一样的触发滚轮事件的方法
box1.addEventListener("DOMMouseScroll",box1.onmousewheel, {passive:false});
}
</script>
9038
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
