温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》
  • 首页 > 
  • 教程 > 
  • 开发技术 > 
  • 关于移动端js弹出层滚动的时候 body层不可滚动的解决办法

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

发布时间:2020-07-11 07:03:13 来源:网络 阅读:1203 作者:Queen张小五 栏目:开发技术

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

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

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

。。。。

后来经过网友的帮助,结合我的代码终于找到了解决的办法关于移动端js弹出层滚动的时候  body层不可滚动的解决办法

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



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

代码如下:


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


向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI