vue移动端弹框出现,背景禁止滑动使用攻略
由于弹框比较长,所以弹出的时候前面的弹框内容需要滑动,但是背景需要禁止滚动,所以使用watch 监听,弹窗出现禁止滚动,弹框消失可以滚动。
代码:
watch: {
coachCard(newVal, oldVal) {
if(newVal == true) {
console.log('gaibian l ');
let cssStr = "overflow-y: hidden; height: 100%;";
document.getElementsByTagName('html')[0].style.cssText = cssStr;
document.body.style.cssText = cssStr;
} else {
let cssStr = "overflow-y: auto; height: auto;";
document.getElementsByTagName('html')[0].style.cssText = cssStr;
document.body.style.cssText = cssStr;
}
// 下面需要这两行代码,兼容不同浏览器
document.body.scrollTop = this.pageScrollYoffset;
window.scroll(0, this.pageScrollYoffset);
}
},