解决移动端弹出层的滚动问题

在工作中，我们常常会遇到这样的需求：点击某个按钮或者分享完之后会弹出一个内容框，水平居中对齐在屏幕上。我们下面的代码就是针对移动端来完成这个需求，我们先来看一下效果图片：

点击分享之前

点击分享之前.jpeg

点击分享之后

点击分享之后.jpeg

html结构分析

html结构分析.jpg

下面是我简化之后的代码，帖出来给大家看一下：
html

<div class="content">这里面是你的内容 巴拉巴拉...</div>
<!-- 用来点击的按钮 -->
<div class="share-btn">
     <a href="javascript:void (0);" id="share">我要分享</a>
</div>
<!-- 分享之后显示的内容 -->
<div class="popup-wrapper">
        <div class="popup-content">
            <h4 class="popup-title">
                分享成功
                <a href="javascript:void (0);" class="close">
                    ![](./img/close.png)
                </a>
            </h4>
            <ul class="content-list">
                <li>
                    <a href="#">
                        <p class="w100">蒙古决定要回归：中国高兴睡不着，美俄听后很震惊蒙古决定要回归：中国高兴睡不着，美俄听后很震惊</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <p class="w72">蒙古决定要回归：中国高兴睡不着，美俄听后很震惊</p>
                        ![](./img/popup-img.png)
                    </a>
                </li>
            </ul>
        </div>
    </div>
<!-- 遮罩层 -->
<div class="bg"></div>

下面是css代码，我这里只贴出最关键的代码，其他的内容就省略了。

 /* popup START */
        .bg {    // 遮罩层
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: url("./img/popup-bg.jpg") no-repeat top left;
            background-size: cover;
            z-index: 1001;
            display: none;
        }

        /* 分享浮动层 */
        .popup-wrapper {   // 跟移动端屏幕一样大的覆盖层，后面会说明为什么要这一层。
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: rgba(0, 0, 0, 0);
            z-index: 10004;
            display: none;
        }

        .popup-content {    // 中间内容
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -5.1466666666666665rem;
            margin-left: -4.466666666666667rem;
            display: none;
            width: 8.933333333333334rem;
            height: 10.293333333333333rem;
            background: #fff;
            z-index: 10005;
            border-radius: 0.13333333333333333rem;
        }

        .close {     // 关闭按钮
            position: absolute;
            right: 0.4rem;
            top: 0;
            display: block;
            width: 0.32rem;
            height: 0.32rem;
            cursor: pointer;
        }

        .close img {
            width: 0.32rem;
            height: 0.32rem;
        }

        .share-btn {   // 分享按钮
            position: fixed;
            right: 0.3rem;
            bottom: 1.6rem;
            font-size: 14px;
        }
        /* popup END */

js代码，下面是最关键的内容了。
为了让大家更直观的看清楚代码的作用，我直接在注释中描述了每行代码的原因，相信大家一看就明白了。

<script src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" charset="utf-8">
    $(function () {
        $("#share").on("click", function () {

            $(".popup-wrapper").on('touchmove', function (event) {
                event.preventDefault();
            });
            // 上面这段代码的作用是当内容层弹出来了之后，
            // 通过.preventDefault()阻止默认行为，
            // 不允许用户滑动屏幕，这个覆盖层做成跟屏幕100%的大小，
            // 就是为了让用户不管滑动任何地方，页面都不会动。
            // 不过这样做有一个比较大的缺点，如果内容中有需要滚动的话，是无法滚动的。

            $(".popup-wrapper").show();     //  覆盖层显示出来
            $(".popup-content").show();     //  �内容显示出来
            $(".bg").show();                //  �遮罩层显示出来
            $(window).scrollTop(0);         //  将滚动条滚动到顶部，
           //  主要是怕有的时候我们的分享按钮在页面的第二屏或者更下面。
           //  还没有点分享按钮之前，查看内容的时候，跑到下面去了，
           //  当弹出的内容层时，还需要滚动滚动条才能看到，这样的体验就不太好。


            $("body, html").css({"overflow": "hidden"}); 
           // 这一句的作用也是为了阻止滚动条滚动，不过移动端有的时候不起作用，
           // 为了以防万一，才加了覆盖层和最上面touchmove的代码。

        });
        $(".close, .bg, .popup-wrapper").on("click", function () {
            $(".bg").hide();
            $(".popup-content").hide();
            $(".popup-wrapper").hide();
            $(window).scrollTop(0);
            $("body,html").css({"overflow": "auto"});
        });
    });
</script>