popup 弹窗出现，禁止页面滚动条

最新推荐文章于 2023-08-09 14:52:36 发布

呼~先生

最新推荐文章于 2023-08-09 14:52:36 发布

阅读量1k

点赞数

文章标签： html 前端 css

本文链接：https://blog.csdn.net/weixin_52492583/article/details/128468582

版权

弹窗出现，禁止页面滚动条，但是弹窗滚动条依旧可以使用

// （1）这一种就是直接将页面回到顶部，不会弹窗在哪打开，页面就停留在打开的那个位置，
//  给页面最外面的div设置css属性
// 打开时
{ 'overflow': 'hidden', 'height' : '100%'};
// 关闭后将css   overflow 设置回去
{ 'overflow': 'visible' }

// （2）这一种，弹窗在哪打开，页面就还在那个位置，不会出现抖动，也是给最外面的盒子设置
// 打开后   将页面设置定位  top移到滚动条的位置
let t = document.documentElement.scrollTop || document.body.scrollTop;
document.getElementById('app').style.position = "fixed";
document.getElementById('app').style.top = "-" + t + 'px';
document.getElementById('app').style.overflow = "hidden";
// 弹窗关闭时,将滚动条滚动到 打开时滚动条的位置,其他样式复原
document.getElementById('app').style.position = "";
document.getElementById('app').style.top = "";
document.getElementById('app').style.overflow = "visible";
window.scrollTo(0,t);