mobile_竖向滑屏

竖向滑屏

元素最终事件 = 元素初始位置 + 手指滑动距离

  • 移动端，"手指按下"，"手指移动" 两个事件即可（且不需要嵌套），有需要时才使用 "手指离开事件"

 

  • 滑屏相关事件
  • 给父元素绑定，是为了全屏滑动
  • 开启定位
  • 上滑，下滑范围限定

 

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

 

posted @ 2018-11-24 11:58  耶梦加德  阅读(192)  评论(0)  编辑  收藏  举报