移动端——滑屏原理分析

最新推荐文章于 2023-01-09 10:35:00 发布

信封中的阳光

最新推荐文章于 2023-01-09 10:35:00 发布

阅读量723

点赞数

分类专栏：学习笔记——移动端滑屏文章标签：移动滑屏

本文链接：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>

信封中的阳光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端——滑屏原理分析

滑屏原理分析<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,user-scalable=no" /> <style>
复制链接

扫一扫