前军教程网

滚轮事件：滚轮

滚动(卷动)事件：滚轮、拖拽滚动条、键盘方向键

<script type="text/javascript">
//滚轮事件：滚轮
//卷动事件：滚轮、拖拽滚动条、键盘?键

//IE和Chrome
gunlun.onmousewheel = function(){
this.innerHTML += "IE和Chrome<br/>";
}
//Firefox
gunlun.addEventListener("DOMMouseScroll", function(){
this.innerHTML += "Firefox<br/>";
})
</script>

判断滚轮方向

<script type="text/javascript">
//滚轮事件：滚轮
//卷动事件：滚轮、拖拽滚动条、键盘?键

//IE和Chrome
gunlun.onmousewheel = function(e){
var ev = e || window.event;
console.log(ev.wheelDelta);//判断滚轮方向的
//上120
//下-120

this.innerHTML += "IE和Chrome<br/>";
}
//Firefox
gunlun.addEventListener("DOMMouseScroll",function(e){
var ev = e || window.event;
console.log(ev.detail);//滚轮方向
//上-3
//下3
this.innerHTML += "Firefox<br/>";
})
</script>

兼容性封装

<script type="text/javascript">
//滚轮事件：滚轮
//卷动事件：滚轮、拖拽滚动条、键盘?键

//IE和Chrome
gunlun.onmousewheel = gl;
//Firefox
gunlun.addEventListener("DOMMouseScroll",gl)

function gl(e){
var dir;
//事件对象的兼容
var ev = e || window.event;
if(ev.wheelDelta){
//IE和Chrome
dir = ev.wheelDelta>0?"上":"下";
}else if(ev.detail){
//FireFox
dir = ev.detail>0?"下":"上";
}

console.log(dir)

}
</script>