鼠标滚轮事件

最新推荐文章于 2021-08-21 11:42:08 发布

weixin_45162984

最新推荐文章于 2021-08-21 11:42:08 发布

阅读量125

点赞数

分类专栏：前端js 兼容问题文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45162984/article/details/110098973

版权

前端js 同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

兼容问题

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1 {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="" id="box1"></div>
    <script type="text/javascript">
    var box1 = document.getElementById('box1');
    box1.onmousewheel = function(event) {
        // 解决兼容
        event = event || window.event
        
        /* 其他浏览器使用event.wheelDelta 来获取鼠标滚动方向，
        * 当event.wheelDelta > 0 时是向上滚，event.wheelDelta < 0 时是向下滚；
        * 但是 火狐浏览器中不支持此属性；
        */
        /* 在火狐浏览器中，使用event.detail 来获取鼠标的滚动方向
        * 当event.detail < 0 时是想上滚，当event.detail > 0时是向下滚 
        */
        //处理兼容可以使用
        if(event.wheelDelta > 0 || event.detail < 0) {
            //此时是向上滚
        }else {
            //此时是向下滚
        }
        /* 当浏览器有滚动条时，元素内的鼠标滚动会触发浏览器滚动条滚动。
        * 想要取消浏览器滚动，可以取消浏览器默认事件
        * 在使用addEventListener绑定的响应函数使用return false取消默认事件无效；
        * 可以使用event来取消默认事件,但是在ie8中不支持event.preventDefault（）方法，所以需要判断
        */
        event.preventDefault && event.preventDefault();
        return false;
    }
    //为火狐浏览器绑定鼠标滚轮事件
    bind(box1,'DOMMouseScroll',box1.onmousewheel)
    function bind(obj,eventStr,callback){
        if(obj.addEventListener){
            obj.addEventListener(eventStr,callback);
        }else{
            obj.attachEvent('on' + eventStr,callback);
        }
    }
    </script>
</body>
</html>

weixin_45162984

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标滚轮事件

/* 给dom对象绑定鼠标滚轮事件，使用onmousewheel事件，但是火狐浏览器 * 不支持这个事件，火狐浏览器使用DOMMouseScroll事件来绑定鼠标滚轮事* 件，且必须用addEventListener来绑定事件* /obj.onmousewheel = function(event) { /* 其他浏览器使用event.wheelDalte 来获取鼠标滚动方向， * 当event.wheelDelte > 0 时是向上滚，event.wheelDelte < 0 时
复制链接

扫一扫

专栏目录