白也blog - h5
type: channel
link: http://www.baiyeovo.cn/index.php/tag/h5/
items: JS弹出遮罩层后底部页面不滚动实现

JS弹出遮罩层后底部页面不滚动实现
type: item
date: 2022-03-18T14:31:00+08:00
description: 在我们开发过程中，经常会遇到这样的问题，在页面上弹出一个弹层，但是底部页面却可以滚动，本文实现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;}