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

最新推荐文章于 2022-09-05 17:36:54 发布

张静蕾

最新推荐文章于 2022-09-05 17:36:54 发布

阅读量1.2w

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/queenzjl/article/details/53507661

移动网站专栏收录该内容

2 篇文章

订阅专栏

在移动端网站开发中，遇到弹出导航列表时底层body跟随滚动的问题。尝试了设置html和body的height及overflow属性，以及使用overflow-y和touchmove事件，但效果不理想。最终解决方案是在弹出层添加特定CSS样式，并在关闭时移除，以实现弹出层滚动而body层保持静止的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

三、加上touchmove事件：window.ontouchmove = function(e){e.preventDefault();return false;},结果整个屏幕都无法滑动，这个办法也不行
。。。。
后来经过网友的帮助，结合我的代码终于找到了解决的办法

代码如下：

<!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');
    //////////////////////////////////////////////
    以下是我用vue.js获取的列表数据部分代码，就不展示了，核心代码都在上面
    </script>
</body>
</html>