DOMMouseScroll,onmousewheel 鼠标滚动事件js

来源:互联网 发布:siesta软件 编辑:程序博客网 时间:2024/04/29 04:55
<!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>
0 0
原创粉丝点击