关于移动端js弹出层滚动的时候 body层不可滚动的解决办法

时间：2016-12-08 00:11:24 阅读：227 评论：0 收藏：0 [点我收藏+]

标签：hidden 网站手机项目

最近在做移动端网站，在点击导航栏，弹出导航列表时，出现了问题。下滑列表时底层body也跟着滚动，连查带想的折腾了两天才解决这个问题。下面主要分享一下解决办法以及关键代码。

一、有的网友建议弹出层弹出时给 html 和 body 都加上“height：100%；overflow：hidden；”，然而在手机上并没有什么卵用

二、结合弹出层加上“overflow-y：auto”依然不起作用

。。。。

后来经过网友的帮助，结合我的代码终于找到了解决的办法

我的项目是用vue.js获取的数据，请求数据部分的代码就不放在这里了，核心代码都已经在这里了

代码如下：

<!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>

    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript" src="vue-resource.js"></script>
    <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 id="ul" v-show="ok" >
            <ul id="menuList" class="layerNode">
                <template v-for="item in message">
                        <li style="height:46px;"><a :href="getHref(item)">{{item.name}}</a></li>
                </template>
            </ul>
        </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>

本文出自 “11484298” 博客，转载请与作者联系！

关于移动端js弹出层滚动的时候 body层不可滚动的解决办法

标签：hidden 网站手机项目

原文地址：http://11494298.blog.51cto.com/11484298/1880356

踩

(0)

评论一句话评论（0）