鼠标滚轮事件

本文最后更新于：2023年3月30日 下午 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标滚轮事件</title>
<style type="text/css">
    div{ width: 100px;height: 100px;background: red}
</style>
</head>
<script type="text/javascript">
//鼠标滚轮事件
window.onload = function() {
    function addEvent(element, type, fn) {
        if(element.addEventListener) {
            // 高版本浏览器添加监听
            element.addEventListener(type, fn, false);
        } else if (element.attachEvent) {
            // IE9以上浏览器添加监听
            element.attachEvent('on' + type,fn);
        } else {
            // IE9以下浏览器添加监听，这里没有.调用时因为连接的事字符串，只能[]调用
            element['on' + type] = fn;
        }
    }
    var oDiv = document.getElementById('div');
    addEvent(oDiv, 'mousewheel', mousewheel);
    addEvent(oDiv, 'DOMMouseScroll', mousewheel);
    function mousewheel(event) {
        var event = event || window.event;
        var bDown = true;
        // event.detail ,event.wheelDelta负值是详细滚动，正值是向上滚动
        /*if(event.wheelDelta){
            bDown = event.wheelDelta<0?true:false;
        }else{
            bDown = event.detail>0?true:false;
        }*/
        bDown = event.wheelDelta?event.wheelDelta < 0 : event.detail > 0;
        if (bDown) {
            oDiv.style.height = oDiv.offsetHeight + 10 + 'px';
        }else{
            oDiv.style.height = oDiv.offsetHeight - 10 + 'px';
        }
        // 阻止默认事件
        if (event.preventDefault) {
        	// 高级浏览器
        	event.preventDefault();
        } else {
            // IE低版本浏览器
        	event.returnValue = false;
        }
    }
}
</script>
<body>
    <div id="div"></div>
</body>
</html>
developer
#原创 #javaScript
鼠标滚轮事件
https://seven3.site/js/鼠标滚轮事件/
作者
Seven3s
发布于
2015年2月5日
许可协议