欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

滚轮滚动事件

程序员文章站 2022-05-29 08:05:06
滚轮滚动事件 ~~~javascript ~~~ ......

滚轮滚动事件

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #box1{
                width: 100px;
                height: 100px;
                background-color: skyblue;
            }
        </style>
        <script type="text/javascript">
            window.onload=function(){
                // 当鼠标滚轮向下滚动时,box1变长
                // 当滚轮向上滚动时,box1变短
                
                var box1 = document.getelementbyid("box1");
                
                // 为box1绑定一个鼠标滚轮滚动事件
                /*
                onmousewheel鼠标滚轮滚动的事件,会在滚轮滚动时触发
                但是火狐不支持该属性
                
                
                在火狐中需要使用dommousescroll 来绑定滚动时间
                  该事件需要通过addeventlistener()函数调用
                */
                box1.onmousewheel=function(event){
                    event = event || window.event;
                    /*
                    判断鼠标滚轮滚动的方向
                    event.wheeldelta 可以获取鼠标滚轮滚动的方向
                    向上滚  120  向下滚 -120
                    wheeldelta这个值不看大小,只看正负
                    */
                   // alert(event.wheeldelta);
                   
                   // wheeldelta这个属性火狐中不支持
                   // 在火狐中使用event.datail来获取滚动
                   // 向上滚-3 向下滚3
                   
                   // alert(event.detail);
                   
                   
                   // 判断鼠标滚轮滚动的方向
                   if(event.wheeldelta > 0 || event.detail <0){
                       // alert("向上")
                       box1.style.height=box1.clientheight-10+"px";
                   }else{
                        box1.style.height=box1.clientheight+10+"px";
                   }
                   
                   /*
                   当滚轮滚动时,如果浏览器有滚动条,滚动条会随之滚动
                   这是浏览起的默认行为  如果不希望发生  可以取消
                   */
                  return false;
                  
                  // 使用addeventlistener()方法绑定响应函数,取消默认行为时不能使用return return false;
                  // 需要使用event来取笑默认行为 event.preventdefault();
                  // ie8不支持event.preventdefault();
                  event.preventdefault&&event.preventdefault();
                }
                
                bind(box1,"dommousescroll",function(){
                    alert(1);
                })
            }
            function bind(obj,eventstr,callback){
                if(obj.addeventlistener){
                    // 大部分浏览器兼容的方式
                    obj.addeventlistener(eventstr,callback,false);
                }else{
                    /*
                    this是谁由调用方式决定的
                    callbank.call(obj)
                    */
                    // ie8及以下
                    obj.attachevent("on"+eventstr,function(){
                        // 在匿名函数中调用回掉函数
                        callback.call(obj);
                    });
                }
            }
            
        </script>
    </head>
    <body>
        <div id="box1"></div>
    </body>
</html>