mobile_豎向滑屏

時間 2019-11-08

標籤 mobile 欄目無線简体版

原文原文鏈接

豎向滑屏javascript

元素最終事件 = 元素初始位置 + 手指滑動距離css

移動端，"手指按下"，"手指移動" 兩個事件便可（且不須要嵌套），有須要時才使用 "手指離開事件"

滑屏相關事件
給父元素綁定，是爲了全屏滑動
開啓定位
上滑，下滑範圍限定

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
        <title>Slide</title>

        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
            }
            
            a {
                text-decoration: none;
            }
            
            ul，
            ol {
                list-style: none;
            }
            
            input {
                outline: none;
            }
            
            img {
                display: block;
            }
            
            html,
            body {
                height: 100%;
                overflow: hidden;
            }
            
            /**** ****/
            #wrap {
                width: 100%;
                height: 100%;
                
                font: 14px Helvetica, Arial, sans-serif;
                background-color: #96b377;
            }
            
            #content {
                position: relative;
            }
        </style>
    </head>
    
    <body>
        
        <!--模擬手機屏幕-->
        <section id="wrap">
            <div id="content">
                
            </div>
        </section>
        
        
        
        
        <!-- javascript 代碼 -->
        <script type="text/javascript">
            // 取消默認行爲
            document.addEventListener("touchstart", function(e){
                e.preventDefault();
            }, false);
            
            // 點透處理
            
            // 適配
            
            var wrap = document.querySelector("#wrap");
            var content = document.querySelector("#content");
            for(var i=0; i<100; i++){
                content.innerHTML += i+"<br />";
            };
            
            console.log("視覺視口"+window.innerWidth+"*"+window.innerHeight);
            console.log("佈局視口"+document.documentElement.clientWidth+"*"+document.documentElement.clientHeight);
            
            bindEleSlide(content, wrap);
            
            // 豎向滑屏事件      滑動元素  父元素     回調函數
            function bindEleSlide(slideEle, parentEle, callBack){
                var oldFingerY = 0;
                var oldEleY = 0;
                
                parentEle.addEventListener("touchstart", function(e){
                    finger = e.changedTouches;
                    
                    oldFingerY = finger[0].clientY;
                    oldEleY = slideEle.offsetTop;
                }, false);
                
                parentEle.addEventListener("touchmove", function(e){
                    finger = e.changedTouches;
                    
                    var newFingerY =  finger[0].clientY;
                    var newEleY = oldEleY + (newFingerY - oldFingerY);
                    if(newEleY > 0){
                        newEleY = 0;
                    }else if(newEleY < document.documentElement.clientHeight - slideEle.clientHeight){
                        newEleY = document.documentElement.clientHeight - slideEle.clientHeight;
                    }
                    
                    slideEle.style.top = newEleY+"px";
                    
                    callBack && callBack();
                }, false);
            };
            
        </script>
    </body>
</html>

相關標籤/搜索

每日一句

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