四十、鼠标滚轴、滚动条事件

最新推荐文章于 2022-11-12 17:02:22 发布

蕙惠子

最新推荐文章于 2022-11-12 17:02:22 发布

阅读量1k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_40976555/article/details/80878512

版权

前端专栏收录该内容

53 篇文章 2 订阅

订阅专栏

一、鼠标滚轴事件 存在浏览器兼容问题

说明：当用户通过鼠标滚轮与页面交互、在垂直方向上滚动页面时(上/下)，就会触发滚轴事件，且这个事件可以在任何元素上触发，最终会冒泡到document(IE)或window(Opera、Chrome和Safari)对象。

1.在IE、Opera、Chrome和Safari中鼠标滚轴事件为：onmousewheel 当转动鼠标滚轮时运行脚本

判断滚动方向：在mousewheel事件中有一个wheelDelta属性，当滚轴向上滑动时，其值为120，当滚轴向下滑动时，其值为-120。根据这个属性返回的值，即可判断当前滚轴的滑动方向。

2.在火狐中鼠标滚轴事件为：DOMMouseScroll

判断滚动方法：在火狐中没有wheelDelta属性，但是火狐中存在另一个类似的detail属性，当滚轴向上滑动时，其值为-3，当滚轴向下滑动时，其值为3。

简单的测试兼容代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body,html{
            height: 8000px;
            width: 100%;
        }
    </style>
</head>
<body>
<script>
    //兼容滚轴事件
    document.onmousewheel=fun; //IE、Opera、Chrome和Safari

    if(document.addEventListener){ //火狐
        document.addEventListener("DOMMouseScroll",fun);
    }

    //执行函数
    function fun(event){
        event = event || window.event; //兼容性

        if(event.wheelDelta){ //IE、Opera、Chrome和Safari
            if(event.wheelDelta>0){
                console.log("向上")
            }else {
                console.log("向下")
            }
            //console.log(event.wheelDelta);
        }else { //火狐
            if(event.detail>0){
                console.log("向下")
            }else {
                console.log("向上")
            }
            //console.log(event.detail);
        }
    }
</script>
</body>
</html>

二、滚动条事件 兼容主流浏览器

onscroll 当滚动元素的滚动条时运行脚本

绑定事件语法：

1.HTML中： <element οnscrοll="myScript">

2.JavaScript中：

直接绑定：object.οnscrοll=function(){myScript};

事件监听：object.addEventListener("scroll", myScript);

注意： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。

3.jQuery中： $(document).scroll(function(){});

蕙惠子

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
四十、鼠标滚轴、滚动条事件

一、鼠标滚轴事件存在浏览器兼容问题说明：当用户通过鼠标滚轮与页面交互、在垂直方向上滚动页面时(上/下)，就会触发滚轴事件，且这个事件可以在任何元素上触发，最终会冒泡到document(IE)或window(Opera、Chrome和Safari)对象。 1.在IE、Opera、Chrome和Safari中鼠标滚轴事件为：onmousewheel 当转动鼠标滚轮时运行脚本判断滚动方向：在mous...
复制链接

扫一扫