滾輪滾動事件

時間 2019-12-19

標籤滾輪滾動事件简体版

原文原文鏈接

滾輪滾動事件

<!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>

1. jQuery 滾輪滾動事件
2. Flash滾輪事件
3. Qt 滾輪事件學習
4. 鼠標滾輪事件
5. jq 滾輪監聽事件
6. 鼠標與滾輪事件
7. react 鼠標滾輪事件
8. 滾輪事件監聽
9. JavaScript鼠標滾輪事件
10. jquery監聽鼠標滾輪(滾動)事件
更多相關文章...
• ionic 滾動條 - ionic 教程
• jQuery Mobile 滾屏事件 - jQuery Mobile 教程
• SpringBoot中properties文件不能自動提示解決方法
• IntelliJ IDEA中SpringBoot properties文件不能自動提示問題解決

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。