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