1、弹出层出现时给body添加样式position:fixed,并算出当时页面的scrollTop滚动值,给body一个负的top值来保证body不会回到顶部,弹出层消失时恢复。
watch: {
isShow(newValue) {
// 获取页面的scrollTop
const top = document.documentElement.scrollTop
if(newValue) {
//点击事件弹出层显示
document.documentElement.style.position = 'fixed'
//给body一个负的top值
document.documentElement.style.top = -top + 'px'
} else {
//弹出层消失点击事件
document.documentElement.style.position = 'static'
//回到我们点击的div位置
window.scrollTo(0, top)
}
}
}
2、可以在遮罩层中添加 @touchmove.prevent 就可以实现禁止页面滚动 注意 弹窗里面有滚动条的也是无法滚动的
<div @touchmove.prevent></div>