DOMMouseScroll，onmousewheel 鼠标滚动事件js

最新推荐文章于 2018-08-03 14:48:00 发布

斯诺登Snowden

最新推荐文章于 2018-08-03 14:48:00 发布

阅读量366

点赞数

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

本文链接：https://blog.csdn.net/qq_33619285/article/details/56053509

版权

js 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div[class^='div'] {
                font-family: "微软雅黑";
                font-size: 40px;
                height: 540px;
                border-bottom: solid 1px paleturquoise;
            }

            .div0 {
                background-color: #ff0;
            }

            .div1 {
                background-color: royalblue;
            }

            .div3 {
                background-color: cornflowerblue;
            }

            .div4 {
                background-color: blueviolet;
            }
        </style>
    </head>

    <body>
        <div class="div0">div0</div>
        <div class="div1">div1</div>
        <div class="div2">div2</div>
        <div class="div3">div3</div>
        <div class="div4">div4</div>
    </body>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">
        //判断是否是火狐浏览器
        var IsFirefox = navigator.userAgent.toLocaleLowerCase().indexOf('firefox') > -1
        $(function() {
            //添加鼠标滚动的监听事件
            if(IsFirefox) {
                document.body.addEventListener('DOMMouseScroll', function(event) {
                    console.log(event.detail); //向上滚动为120，向下是-120
                })
            } else {
                document.body.onmousewheel = function() {
                    console.log(event.wheelDelta); //向上滚动为120，向下是-120
                };
            }
        })
    </script>

</html>

斯诺登Snowden

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOMMouseScroll，onmousewheel 鼠标滚动事件js

document.body.onmousewheel = function() { console.log(event.wheelDelta); //向上滚动为120，向下是-120 };
复制链接

扫一扫

专栏目录