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