html移动端遮罩层禁止滚动,H5当弹出弹窗遮罩时如何阻止滚动穿透(使用css方式)...

最近的一个H5活动中有一个是点击[分享]弹窗指引遮罩弹窗引导用户进行分享,但突然发现弹出弹窗的时候下层仍然可以进行滑动,这个问题是个H5经久不衰讨论的问题,重点是我这个页面在安卓系统上有明显的滑动闪烁问题,所以不得不进行解决,具体导致闪烁问题待排查,这里是使用了规避方法,即当弹出弹窗的时候固定弹窗,参考:https://juejin.im/post/5c4974f0518825260c5d1851

这里先记录最终解决方案,是使用当弹窗出现的时候将页面body的position设置为fixed并记录此刻滚动的位置,弹窗消失去除position属性

点击[分享好友]:

onInviteFriendClick() {

this.viewState.shareCover.visible = true;

//遮罩出现不可以滚动

let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

document.body.style.cssText += 'position:fixed;width:100%;top:-' + scrollTop + 'px;';

}

点击使遮罩消失

onVisibleClick = () => {

const oldVisible = this.viewState.shareCover.visible;

Object.assign(this.viewState, {

shareCover: {

visible: !oldVisible

}

});

//去除遮罩恢复滚动

if (!this.viewState.shareCover.visible) {

let body = document.body;

body.style.position = '';

let top = body.style.top;

document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top);

body.style.top = '';

}

};

可以看到上面的解决方案是控制底层的css来解决这个问题,我在这之前尝试使用js的方式阻止滚动,但是这个removeEventListener之后我的手机(ios)系统阻尼效果严重,时间关系放弃了改解决方案,参考:https://blog.csdn.net/qq_40513881/article/details/87190511