html 禁止所有弹窗,H5弹窗弹出后，页面仍可滚动，希望禁止滚动

1.给html标签添加overflow:hidden属性(弊端：先滚动页面，后弹出弹窗，页面会回到顶部)

let ele=document.getElementsByTagName('html');

if(modelIsShow){

ele.style.overflow='hidden';

}else{

ele.style.overflow='';

}

2.禁止touchmove的默认事件(弊端：滚动事件失效)

document.addEventListener('touchmove',function(e){

if(modelIsShow){

e.preventDefault();

}

},{passive: false})

3.改变body样式(实测可行)

/**

* 阻止背景滚动

*

* @param Boolean flag [是否阻止背景滚动]

*/

const preventBack = (flag) => {

if (flag) {

const top = document.documentElement.scrollTop || document.body.scrollTop;

document.body.style.cssText += `

position: fixed;

width: 100vw;

left: 0;

top: ${-top}px;

`;

} else {

const top = document.body.style.top;

document.body.style.cssText += `

position: static;

`;

window.scrollTo(0, Math.abs(parseFloat(top)));

}

};