博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

滚轮事件的应用

Posted on 2016-11-28 02:04  简单是书  阅读(68)  评论(0编辑  收藏  举报

主要知识点:
1、滚轮事件的应用代码
2、火狐浏览器与IE浏览器应用滚轮事件的区别。
火狐浏览器应用滚轮事件只能通过addEventListener(“DOMMouseScroll”,function,false).
3、e.wheelDelta > 0表示滚轮向上,反之向下。
e.detail < 0表示滚轮向下,反之向上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mousewheel</title>
</head>
<body>
<div id="btn" style="width: 300px;height: 300px;background-color: yellow"></div>
    <script type="text/javascript">
    var btn = document.getElementById("btn");
    btn.onmousewheel = function(e) {
        var e = e || window.event;
        if(e.wheelDelta > 0) {
            alert("up")
        }else {
            alert("down")
        }
        console.log(e);
    }
    document.addEventListener("DOMMouseScroll",function(e) {
        var e = e || window.event;
        console.log(e);
        if(e.detail < 0) {
            alert("up")
        }else {
            alert("down");
        }
    },false)
    </script>
</body>
</html>