JS 鼠标滚轮事件

最新推荐文章于 2024-09-12 16:31:59 发布

mmm_morning

最新推荐文章于 2024-09-12 16:31:59 发布

阅读量383

点赞数

本文链接：https://blog.csdn.net/mmm_morning/article/details/120860486

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标滚轮事件</title>
    <style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: greenyellow;
        }
    </style>
</head>
<!-- 给网页加一个滚动条 -->
<body style="height: 2000px;">
    <div id="box1" >
    </div>
</body>
<script>
    window.onload=function(){
        var box1=document.getElementById("box1");
        // 绑定鼠标滚轮事件onmousewheel,该属性火狐不兼容
        //  onwheel除IE都可用
        box1.onwheel=function(event){
            // alert(444);
            event=event||window.event;
            // 判断滚轮滑动方向
            // event.deltaY
            // alert(event.wheelDelta);
            // alert(event.deltaY);
            if(event.deltaY<0)
            {
                // 滚轮上滑，缩小
                box1.style.height=box1.clientHeight-10+'px';
            }else if(event.deltaY>0){
             //滚轮下滑，放大
             box1.style.height=box1.clientHeight+10+'px';
            };
            // 如果浏览器中网页有滚动条，此时的效果不理想
            // 这是浏览器的默认行为，若不希望发生，则return false
            // event.cancelBubble;无法起作用
            // 使用addEventListener()添加响应事件时，使用return false无法取消默认行为。
            // 此时需要使用event.PreventDefault();
            event.preventDefault();
            //  return false;

        };
       

    }
 

</script>
</html>