鼠标滚轮事件

最新推荐文章于 2021-05-25 17:18:13 发布

della_uii

最新推荐文章于 2021-05-25 17:18:13 发布

阅读量306

点赞数

分类专栏： JavaScript 文章标签：鼠标滚轮事件

本文链接：https://blog.csdn.net/Della_UI/article/details/53056592

版权

JavaScript 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #div1{
                width: 100px;
                height: 100px;
                background: red;
            }
        </style>
    </head>
    <body>
        <div id="div1"></div>
        <script type="text/javascript">
            var oDiv=document.getElementById("div1");

            // ie/chrome:onmousewheel  滚动方向：event.wheelDelta  下：-120； 上：120
            oDiv.onmousewheel=fn;

            // firefox:DOMMouseScroll 必须用AddEventListener  滚动方向：event.detail   下：3； 上：-3
            if (oDiv.addEventListener) {
                oDiv.addEventListener('DOMMouseScroll',fn,false);
            }

            function fn(ev){
                var ev = ev || event;
                var b=true;
                if (ev.wheelDelta) {
                    b=ev.wheelDelta > 0 ? true : false;
                }else{
                    b=ev.detail < 0 ? true : false;
                }

                if ( b ) {
                    this.style.height=this.offsetHeight - 10 +'px';
                }else{
                    this.style.height=this.offsetHeight + 10 +'px';
                }

                // 阻止 obj.addEventListener(事件名称，时间函数，是否捕获) 形式的事件默认行为
                if (ev.preventDefault) {
                    ev.preventDefault();
                }

                // 阻止 obj.事件名称=事件函数 和 obj.attachEvent(事件名称，事件函数) 形式的事件默认行为
                return false;
            }
        </script>
    </body>
</html>

della_uii

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标滚轮事件

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div1{ width: 100px; height: 100px;
复制链接

扫一扫

专栏目录