移动端 js 弹出层内容滚动的时候，不影响body的滚动条处理

如标题所示，这里受 https://segmentfault.com/a/1190000003849952 这篇文章的启发，自己重写了一下代码

效果图：

代码：

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>移动端->弹出层内容滚动的时候，不影响body的滚动条处理</title>
<style>
*{
    margin:0;
    padding:0;
}
body{
    height:1500px;
}
.mark{
    width:100%;
    height:100%;
    background:rgba(0,0,0,.5);
    position:fixed;
    left:0;
    top:0;
}
.layerNode{
    width:200px;
    height:200px;
    left:50%;
    top:50%;
    margin-left:-100px;
    margin-top:-100px;
    background-color:#fff;
    position: absolute;
    overflow-y:scroll;
    -webkit-overflow-scrolling : touch; /* ios 自带滚动条不平滑解决方法 */

}
</style>
</head>
<body>


body层

<div class="mark">
    <div class="layerNode">
        <p>弹出层 start</p>
        <p>测试</p>
        <p>测试</p>
        <p>测试</p>
        <p>测试</p>
        <p>测试</p>
        <p>测试</p>
        <p>测试</p>
        <p>测试</p>
        <p>测试</p>
        <p>测试</p>
        <p>测试</p>
        <p>测试</p>
        <p>测试</p>
        <p>测试</p>
        <p>测试</p>
        <p>测试</p>
        <p>测试</p>
        <p>测试</p>
        <p>测试</p>
        <p>测试</p>
        <p>测试</p>
        <p>测试</p>
        <p>测试</p>
        <p>测试</p>
        <p>测试</p>
        <p>测试</p>
        <p>测试</p>
        <p>测试</p>
        <p>测试</p>
        <p>测试</p>
        <p>测试</p>
        <p>测试</p>
        <p>弹出层 end</p>
    </div>
</div>


<script type="text/javascript">

    //弹出层滚动条不影响到body [layerNode：需要滚动的元素]
    var DivScroll = function( layerNode ){
        //如果没有这个元素的话，那么将不再执行下去
        if ( !document.querySelector( layerNode ) ) return ;

        this.popupLayer = document.querySelector( layerNode ) ;
        this.startX = 0 ;
        this.startY = 0 ;

        this.popupLayer.addEventListener('touchstart', function (e) {
            this.startX = e.changedTouches[0].pageX;
            this.startY = e.changedTouches[0].pageY;
        }, false);

        // 仿innerScroll方法
        this.popupLayer.addEventListener('touchmove', function (e) {

            e.stopPropagation();

            var deltaX = e.changedTouches[0].pageX - this.startX;
            var deltaY = e.changedTouches[0].pageY - this.startY;

            // 只能纵向滚
            if(Math.abs(deltaY) < Math.abs(deltaX)){
                e.preventDefault();
                return false;
            }

            if( this.offsetHeight + this.scrollTop >= this.scrollHeight){
                if(deltaY < 0) {
                    e.preventDefault();
                    return false;
                }
            }
            if(this.scrollTop === 0){
                if(deltaY > 0) {
                    e.preventDefault();
                    return false;
                }
            }
            // 会阻止原生滚动
            // return false;
        },false);

    }

    //调用
    var divScroll = new DivScroll('.layerNode');

    </script>
</body>
</html>

 

posted @ 2016-05-02 13:19  Zion0707  阅读(3376)  评论(2)  编辑  收藏  举报