JS弹出遮罩层后底部页面不滚动实现

在我们开发过程中，经常会遇到这样的问题，在页面上弹出一个弹层，但是底部页面却可以滚动，本文实现JS弹出遮罩层后底部页面不滚动效果。首先效果如图，这里我们需要点击页面头部一个按钮才出现弹层，这里是弹层出现后底部页面滑动到下面的效果图：

这里只需CSS就可实现，代码如下：

//弹层CSS代码
.paydiv{
    position: fixed;
    left: 0;
    top:0;
    right:0;
    bottom:0;
    z-index: 100;  
    background: rgba(0, 0, 0, 0.8);
}

//外层包裹层CSS代码，缺一不可
.paydiv-wrapper{
    width:100%;
    height: 100%;
    overflow: auto;    //这里overflow:scroll也可以
}

注意这个时候可能会出现底部页面不滚动但是有滚动条情况：

这时候我们需要对滚动条样式进行调整：

//使用::-webkit-scrollbar滚动条样式修改
.paydiv-wrapper::-webkit-scrollbar{
    display: none;
}

最终实现效果：

---

这样我们就能实现JS弹出遮罩层后底部页面不滚动效果。