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

在我们开发过程中，经常会遇到这样的问题，在页面上弹出一个弹层，但是底部页面却可以滚动，本文实现JS弹出遮罩层后底部页面不滚动效果。

//弹层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;

}