zoukankan      html  css  js  c++  java
  • 鼠标滚轮事件(兼容版)

    案例背景

      通过鼠标滚轮滚动,放大缩小容器(上滚变短,下滚变长)。

    案例代码

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>滚轮事件</title>
        </head>
        <body>
            <div id="box1"></div>
        </body>
        <script>
            window.onload = function(){
                //获取div
                var box1 = document.getElementById("box1");
                
                // 为div绑定鼠标滚轮事件
                /**
                 * onmousewheel鼠标滚轮事件,会在滚轮滚动时触发
                 * *但是火狐不支持该属性
                 * *在火狐中需要使用DOMMouseScroll 来绑定滚动事件
                 * *并且该事件需要通过addEventListener() 函数来绑定
                 */
                box1.onmousewheel = function(event){
                    event = event || window.event;
                    
                    /**
                     * event.wheelDelta 可以获取鼠标滚轮事件的方向
                     * 向上滚 120   向下滚 -120
                     * wheelDelta这个值我们不看大小,只看正负
                     * 
                     * wheelDelta火狐不支持
                     * 在火狐中使用event.detail来获取滚动方向
                     * 向上滚 -3    向下滚 3
                     */
                    
                    // 判断鼠标滚动方向
                    if(event.wheelDelta > 0 || event.detail < 0){
                        // 滚轮向上滚 box1变短
                        // clientHeight属性表示容器可见高度
                        box1.style.height = box1.clientHeight - 10 + "px";
                    }else{
                        // 滚轮向下滚 box1变长
                        box1.style.height = box1.clientHeight + 10 + "px";
                    }
                    
                    /**
                     * 使用addEventListener()方法绑定响应函数,取消默认行为是不能使用return false
                     * 需要使用event来取消 event.preventDefault()
                     * 但是IE8不支持
                     */
                    event.preventDefault && event.preventDefault();
                    
                    /**
                     * 当滚轮滚动时,如果浏览器有滚动条,滚动条随之滚动
                     * 这是浏览器默认欣慰,不希望发生时,可取消
                     */
                    return false;
                }
                
                // 为火狐绑定滚轮事件
                bind(box1 , "DOMMouseScroll" , box1.onmousewheel);
                
                // 事件绑定方法
                function bind(obj , eventStr , callback){
                    if(obj.addEventListener){
                        // 大部分浏览器兼容的方式
                        obj.addEventListener(eventStr , callback , false);
                    }else{
                        /**
                         * this是有谁调用方法决定
                         * callback.call(obj)
                         */
                        // IE8以下
                        obj.attachEvent("on"+eventStr , function(){
                            // 在匿名函数中调用回调函数
                            callback.call(obj);
                        })
                    }
                }
            }
        </script>
        <style>
            #box1 {
                background-color: red;
                 6.25rem;
                height: 6.25rem;
            }
        </style>
    </html>
  • 相关阅读:
    别老想着怎么用好RPC框架,你得多花时间琢磨原理
    业务代码真的会有这么多坑?
    mac全部看视频屏幕闪烁适用于白果黑果
    iterm2 proxy配置
    源端和目标端数据对比
    frp内网穿透,rdp远程连接Windows计算机
    frp rdp远程桌面
    按块提交抽取数据
    创建索引被锁ora-00054资源正忙,但指定以nowait方式
    2017-9-17C#笔记(方法,方法参数 ,foreach语句)
  • 原文地址:https://www.cnblogs.com/penghewen-cnblogs/p/10649578.html
Copyright © 2011-2022 走看看