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