移动端——滑屏原理分析

最新推荐文章于 2020-04-03 22:01:39 发布
信封中的阳光
最新推荐文章于 2020-04-03 22:01:39 发布
阅读量789
点赞数
分类专栏：学习笔记——移动端滑屏文章标签：移动滑屏
本文链接：https://blog.csdn.net/jun_sun_shine/article/details/53023449
版权
学习笔记——移动端滑屏专栏收录该内容
8 篇文章 0 订阅
订阅专栏
滑屏原理分析

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width,user-scalable=no" />
        <style>
            html{
                height: 100%;
            }
            body{
                margin: 0;
                height: 100%;
                position: relative;
                overflow: hidden;
            }
            #wrap{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;

            }
            #scroll{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
            }
        </style>
        <script>
            window.onload=function(){
                var wrap=document.querySelector('#wrap');
                var scroll=document.querySelector('#scroll');

                var startPoint=0;//用于储存手指按下的坐标
                var startElement=0;//用于储存手指按下时元素距离定位父级的距离

                wrap.addEventListener(
                    'touchstart',
                    function(e){
                        var touch = e.changedTouches[0];
                        startPoint = touch.pageY; //记录手指按下时手指在页面的位置
                        startElementTop = scroll.offsetTop;//当前元素距离包裹层的TOP值
                    });

                wrap.addEventListener(
                    'touchmove',
                    function(e){
                        var touch = e.changedTouches[0];
                        var nowPoint = touch.pageY;//记录移动后手指的在页面中的位置
                        var distance = nowPoint-startPoint;//记录move的移动距离
                        scroll.style.top=startElementTop+distance+'px';//滚动层当前的top值=手指按下时的TOP值+手指的移动距离
                    });
            }
        </script>
    </head>
    <body>
        <div id="wrap"><!-- 包裹层 -->
            <div id="scroll"><!-- 滚动区域 -->
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
                滑屏原理分析<br>
            </div>
        </div>
    </body>
</html>