ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

js基础---滚轮事件 并处理火狐兼容

2021-09-06 13:01:52  阅读:176  来源: 互联网

标签:滚轮 滚动 js --- 火狐 obj box1 event


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            
            #box1{
                width: 100px;
                height: 100px;
                background-color: red;
            }
            
        </style>
        <script type="text/javascript">
            
            window.onload = function(){
                
                
                //获取id为box1的div
                var box1 = document.getElementById("box1");
                
                //为box1绑定一个鼠标滚轮滚动的事件
                /*
                 * onm ousewheel鼠标滚轮滚动的事件,会在滚轮滚动时触发,
                 *     但是火狐不支持该属性
                 * 
                 * 在火狐中需要使用 DOMMouseScroll 来绑定滚动事件
                 *     注意该事件需要通过addEventListener()函数来绑定
                 */
                
                
                box1.onmousewheel = function(event){
                    
                    event = event || window.event;
                    
                    
                    //event.wheelDelta 可以获取鼠标滚轮滚动的方向
                    //向上滚 120   向下滚 -120
                    //wheelDelta这个值我们不看大小,只看正负
                    
                    //alert(event.wheelDelta);
                    
                    //wheelDelta这个属性火狐中不支持
                    //在火狐中使用event.detail来获取滚动的方向
                    //向上滚 -3  向下滚 3
                    //alert(event.detail);
                    
                    
                    /*
                     * 当鼠标滚轮向下滚动时,box1变长
                     *     当滚轮向上滚动时,box1变短
                     */
                    //判断鼠标滚轮滚动的方向
                    if(event.wheelDelta > 0 || event.detail < 0){
                        //向上滚,box1变短
                        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 && 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>
    </head>
    <body style="height: 2000px;">
        
        <div id="box1"></div>
        
    </body>
</html>

 

标签:滚轮,滚动,js,---,火狐,obj,box1,event
来源: https://www.cnblogs.com/leiyanting/p/15233251.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有