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

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

点击分享之前

点击分享之前.jpeg

点击分享之后

点击分享之后.jpeg

html结构分析

html结构分析.jpg

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

这里面是你的内容 巴拉巴拉...


     我要分享



        

            

                分享成功
                
                    ![](./img/close.png)
                
            
            

                

                    
                        
蒙古决定要回归：中国高兴睡不着，美俄听后很震惊蒙古决定要回归：中国高兴睡不着，美俄听后很震惊
                    
                
                

                    
                        
蒙古决定要回归：中国高兴睡不着，美俄听后很震惊
                        ![](./img/popup-img.png)
                    
                
            
        
    

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