H5当弹出弹窗遮罩时如何阻止滚动穿透(使用css方式)

最近的一个H5活动中有一个是点击[分享]弹窗指引遮罩弹窗引导用户进行分享,但忽然发现弹出弹窗的时候下层仍然能够进行滑动,这个问题是个H5经久不衰讨论的问题,重点是我这个页面在安卓系统上有明显的滑动闪烁问题,因此不得不进行解决,具体致使闪烁问题待排查,这里是使用了规避方法,即当弹出弹窗的时候固定弹窗,参考:http://www.javashuo.com/article/p-tinyibkx-hd.html

这里先记录最终解决方案,是使用当弹窗出现的时候将页面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)系统阻尼效果严重,时间关系放弃了改解决方案,参考:http://www.javashuo.com/article/p-txpxenqf-gp.html