滚轮事件

最新推荐文章于 2021-12-18 17:49:15 发布

MMMMMMF

最新推荐文章于 2021-12-18 17:49:15 发布

阅读量170

点赞数

本文链接：https://blog.csdn.net/MMMMMMF/article/details/107307045

版权

<!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>
        #box {
            width: 500px;
            height: 500px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <script>
        /*
        IE  或 谷歌  使用DOM0  元素对象.onmousewheel   DOM2去掉on
火狐绑定滚轮事件必须使用DOM2事件事件，并且对应的事件名是 DOMMouseScroll
        //IE或谷歌
        元素对象.onmousewheel = 事件处理函数；
        
        //火狐  
        元素对象.addEventListener("DOMMouseScroll",事件处理函数);
        */
        var box = document.getElementById("box");

        // 绑定滚轮事件  绑定两次做兼容  IE 谷歌 火狐都兼容了

        //IE或谷歌
        box.onmousewheel = function (ev) {
            ev = ev || window.event;
            console.log(whellEvent(ev));
        }

        //火狐  
        box.addEventListener("DOMMouseScroll", function (ev) {
            ev = ev || window.event;
            console.log(whellEvent(ev));

        });


        // 判断滚轮的方向（兼容的处理）
        function whellEvent(ev) {
            //滚轮方向的
            //IE或谷歌  事件对象.wheelDelta  
            //往前滚 ： 120  往后滚：-120  并且火狐不兼容  是undefined   
            // console.log(ev.wheelDelta);

            // 火狐下  ev.detail  
            // 往前滚 ： -3  往后滚：3  
            // console.log(ev.detail);
            if (ev.wheelDelta) { //成立  IE 或 谷歌
                return ev.wheelDelta;
            } else { //火狐   
                return ev.detail * -40;
            }
        }
    </script>
</body>

</html>