移动端——滑屏原理分析—上下滑屏不过界

最新推荐文章于 2021-02-23 20:26:42 发布

信封中的阳光

最新推荐文章于 2021-02-23 20:26:42 发布

阅读量534

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/jun_sun_shine/article/details/53024614

学习笔记——移动端滑屏专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个简单的HTML滑屏示例，通过触摸事件实现上下滑动效果，并确保滑动不超出预设边界。代码中详细展示了如何使用JavaScript监听touchstart和touchmove事件来控制滑动层的位置。

<!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;//用于储存手指按下时元素距离定位父级的距离
                var maxTop=wrap.clientHeight-scroll.offsetHeight;//负值  包裹层的可视层高度-滚动层的占位高度=最大的可移动距离

                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的移动距离
                    var top=startElementTop+distance;//滚动层当前的top值

                    if(top>0){//手指向下↓移动 
                        top=0;
                    }
                    if(top<maxTop){//手指向上↑移动 ，到最低部
                        top=maxTop;
                    }
                    scroll.style.top=top+'px';//滚动层当前的top值=手指按下时的TOP值+手指的移动距离
                });
            }
        </script>
    </head>
    <body>
        <div id="wrap">
            <div id="scroll">
                top为0<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>
                top为MaxTop<br />
            </div>
        </div>
    </body>
</html>