滚轮事件——js

最新推荐文章于 2024-08-14 17:15:24 发布

_洋

最新推荐文章于 2024-08-14 17:15:24 发布

阅读量811

点赞数

分类专栏： JavaScript 文章标签： js

本文链接：https://blog.csdn.net/mantou_riji/article/details/124038962

版权

JavaScript 专栏收录该内容

52 篇文章 7 订阅

订阅专栏

此博客介绍了如何使用JavaScript实现滚轮事件，当用户滚动手轮时，让div元素根据滚轮的上下移动相应变长或变短。通过DOMMouseScroll和onmousewheel事件监听，结合event对象判断滚动方向并实时调整元素高度。

摘要由CSDN通过智能技术生成

滚轮事件——js

实现效果：

滚轮向上移动，变长；滚轮向下移动，变短

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CgcEieHG-1649394637527)(Untitled 4.assets/image-20220408131002297.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: rosybrown;
        }
    </style>
    <script>
        window.onload = function(){
            // 滚轮向上移动，变长
            // 滚轮向下移动，变短
            var box1 = document.getElementById("box1");

            /*
            onmousewheel:鼠标滚轮事件，滚轮滚动的时候触发
            火狐不支持：使用的是DOMMouseScroll绑定滚动事件，通过addEventListener()来绑定——直接使用bind

            */
            box1.onmousewheel = function(event){
                event = event || window.event;
                // event.wheelDelta可以获取滚轮滚动的方向
                // wheelDelta=120 向上滚， wheelDelta=-120向下滚
                // 只看方向，不看大小

                // 在火狐中需要使用event.detail获取滚动的方向。
                if(event.wheelDelta > 0 || event.detail < 0){
                    box1.style.height = box1.clientHeight - 10 + "px";
                }else{
                   box1.style.height = box1.clientHeight + 10 + "px";
                }
                //    使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false需要使用event来取消默认行为
                // IE8又不支持，所以采用如下方式，有就用，没有就不用。
                event.preventDefault&&event.preventDefault();

                /*
                当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动，这是浏览器的默认行为，如果不希望发生，则可以取消默认行为
                */
               return false;//在onmousewheel 函数里面return。


            };
            bind(box1,"DOMMouseScrool",box1.onmousewheel);
        };

           function bind(obj, eventStr, callback){

            if(obj.addEventListener){
            obj.addEventListener(eventStr, callback, false);
            }else{
            obj.attachEvent("on"+eventStr, function(){
                callback.call(obj);
            });
            }
           } 
    </script>
</head>
<body style="height: 2000px;">
    <div id = "box1">

    </div>
    
</body>
</html>