移动端滑屏原理

 

 

最大最小移动距离

 

 

 

样式：

<style>
    html {
        height: 100%;
    }
    body {
        margin: 0;
        height: 100%;
        position: relative;
        overflow: hidden;
    }
    #wrap {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    #scroll {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        background: #ccc;
    }
</style>

内容：

<div id="wrap">
    <div id="scroll">
        START <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>
        END <br>
    </div>
</div>

js:

<script>
    var wrap = document.querySelector("#wrap");
    var scroll = document.querySelector("#scroll");
    var maxTop=wrap.clientHeight-scroll.offsetHeight
    scroll.addEventListener(
        'touchstart',
        function(e){
            var touch=e.changedTouches[0];
            startPoint=touch.pageY;
            startEl=scroll.offsetTop;
        }
    )
    scroll.addEventListener(
        'touchmove',
        function(e){
            var touch = e.changedTouches[0]; //注意每次都要获取手指
            var nowPoint=touch.pageY;
            var dir=nowPoint-startPoint;   //手指移动距离
            
            var top=dir+startEl;
            if(top>0){
                top=0;
            }else if(top<maxTop){
                top=maxTop
            }
            scroll.style.top=top+'px';
        }
    )
</script>

回弹效果：待续