<script>
window.onload= function () {
var div1=document.getElementById('div1');
div1.onmousewheel= function () {
alert(1);
};
if(div1.addEventListener){
div1.addEventListener('DOMMouseScroll',function(){
alert(0);
},false);
}
};
</script>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width: 100px;
height: 100px;
border: 1px solid red;
position: absolute;
}
</style>
<script>
window.onload= function () {
var div1=document.getElementById('div1');
var b=true;
div1.onmousewheel=fn;
if(div1.addEventListener){
div1.addEventListener('DOMMouseScroll',fn,false);
}
function fn(ev){
var ev=ev || event;
// alert(ev.wheelDelta); //ie chrome下-120 上120
//ff ev.detail 下 3 上-3
if(ev.wheelDelta){
b=ev.wheelDelta>0?true:false;
}else{
b=ev.detail>0?false:true;
}
if(b){
this.style.height=parseInt(getByClass(this,'height'))-10+'px';
}else{
this.style.height=parseInt(getByClass(this,'height'))+10+'px';
}
if(ev.preventDefault){
ev.preventDefault();
}
return false; //阻止的是obj.on事件名称所触发的默认行为,
// ff是通过addEventListener绑定的,它需要通过ev.preventDefault()
}
function getByClass(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj)[attr];
}
}
};
</script>
</head>
<body style="height: 2000px">
<div id="div1"></div>
<!--ie/chrome onmousewheel-->
<!--ff:DOMMouseScroll 必须用addEventListener实现绑定-->
</body>
</html>
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。