VUE移动端-模态框滚动穿透问题

1 v-show显示模态框

2 watch 监听模态框 的变化

watch:{
isHidden(newVal){
newVal?this.scrollStop():this.scrollStart()
}
}

3 在isHidden值发生变化的时候，
a 阻止浏览器的默认行为，同时禁止页面滚动

scrollStop(){
var m = function(e){
e.preventDefault()
}
document.body.style.overflow = ‘hidden’
document.addEventListener(‘touchmove’,m,false) //禁止页面滑动
},

b 在 isHidden 模态框 关闭的时候，让页面出现滚动条

scrollStart(){
var m = function(e){
e.preventDefault()
}
document.body.style.overflow = ‘’
document.addEventListener(‘touchmove’,m,false)//出现滚动条
},

//在安卓手机上测试后发现不行，还是出现滚动穿透问题

解决：

scrollStop(){
var m = function(e){
e.preventDefault()
}
//换成以下代码
document.documentElement.style.position = ‘fixed’;
document.body.style.overflow = ‘hidden’; //隐藏滚动条
},

scrollStart(){
var m = function(e){
e.preventDefault()
}
//换成以下代码
document.documentElement.style.position = ‘static’;
document.body.style.overflow = ‘’; //出现滚动条

},