vue弹出层滑动禁止背景跟着滑动_vue 移动端 弹框出现，背景禁止滑动

1- 由于弹框比较长，所以弹出的时候前面的弹框内容需要滑动，但是背景需要禁止滚动

2-所以使用watch 监听，弹窗出现禁止滚动，弹框消失可以滚动

`

//首先显示模态框

// 教练详细信息分享卡片

ShowCoachCard (res) {

this.coachCard = true;

}

然后监听，当模态框弹出的时候就控制

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);

}

},

`

这里的样式是，首先这个模态框一定要放在页面的最顶部

然后相对页面固定定位，宽度和高度和页面一样大

// 成员分享

.share-box {

// 让他撑满浏览器 和浏览器一样大

left: 0;

right: 0;

bottom: 0;

top: 0;

// position: absolute;

position: fixed;

z-index: 10000;

overflow: auto;

/*border: red 1px solid;*/

background: rgba(0, 0, 0, 0.4);

}

贼长的弹框