VUE mobile terminal-modal frame rolling penetration problem

1 v-show display modal box

2 watch monitor the changes of the modal

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

3 When the value of isHidden changes,
a prevents the default behavior of the browser and prohibits page scrolling at the same time

scrollStop(){ var m = function(e){ e.preventDefault() } document.body.style.overflow ='hidden' document.addEventListener('touchmove',m,false) // prohibit page sliding },

b When the isHidden modal box is closed, let the page show a scroll bar

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

//After testing on an Android phone, I found that it doesn’t work, and there is still a scroll penetration problem

solve:

scrollStop(){ var m = function(e){ e.preventDefault() } // Replace with the following code document.documentElement.style.position ='fixed'; document.body.style.overflow ='hidden'; // Hide scroll bar },

scrollStart(){ var m = function(e){ e.preventDefault() } // Replace with the following code document.documentElement.style.position ='static'; document.body.style.overflow =''; //appear scroll bar

},