<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div id="div1"></div>
<script type="text/javascript">
var oDiv=document.getElementById("div1");
// ie/chrome:onmousewheel 滚动方向:event.wheelDelta 下:-120; 上:120
oDiv.onmousewheel=fn;
// firefox:DOMMouseScroll 必须用AddEventListener 滚动方向:event.detail 下:3; 上:-3
if (oDiv.addEventListener) {
oDiv.addEventListener('DOMMouseScroll',fn,false);
}
function fn(ev){
var ev = ev || event;
var b=true;
if (ev.wheelDelta) {
b=ev.wheelDelta > 0 ? true : false;
}else{
b=ev.detail < 0 ? true : false;
}
if ( b ) {
this.style.height=this.offsetHeight - 10 +'px';
}else{
this.style.height=this.offsetHeight + 10 +'px';
}
// 阻止 obj.addEventListener(事件名称,时间函数,是否捕获) 形式的事件默认行为
if (ev.preventDefault) {
ev.preventDefault();
}
// 阻止 obj.事件名称=事件函数 和 obj.attachEvent(事件名称,事件函数) 形式的事件默认行为
return false;
}
</script>
</body>
</html>
鼠标滚轮事件
最新推荐文章于 2021-05-25 17:18:13 发布