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弹出遮罩层后底部页面不滚动效果。