vue-彈出蒙層滾動穿透解決方案

開發中的一些積累

問題起因：

在一個可滑動列表頁彈出一個全屏蒙層，蒙層固定，中間一塊顯示消息框，當用手滑動蒙層空白處時，滑動事件會穿透到底部列表頁，導致列表頁的滑動。

實現目標：

1. 滑動蒙層空白處不讓滑動事件穿透。
2. 當蒙層消息框文字多時，要讓文字可上下滑動。
3. 具體效果如下：
   
   

實現思路：

1. vue提供的 @touchmove.prevent 可以用來阻止滑動，但是這個方法會對其內的子div的滑動事件也禁止掉了，這樣會導致中間文字無法滑動。如果沒有中間滑動需求，用 @touchmove.prevent 實現是一個很好的方法。
2. 蒙層設爲fixed懸浮在最上，底部列表設置overflow-y: hidden；這樣可以列表內容就不可以滑了，但實際過程中沒有效果，於是想到繼續往列表父div向上追溯，對body和html標籤設置相關樣式，這樣就控制住了底部列表滑動問題。
3. 蒙層空白處點擊事件與中間文字點擊事件處理，防止事件冒泡帶來其他bug。

相關實現：

1. html代碼都是比較簡單，列表頁for循環實現；蒙層用一個變量控制其顯示和隱藏。但這裏有幾個注意點: a. 給上面列表的div動態綁定了 noScroll class，它的作用是當消息蒙層顯示時切換到相關的css樣式； b. 彈出的全屏蒙層，加有點擊事件是爲了點空白處讓蒙層消失，但這裏對顯示的每行文字還加了@click.stop="messageTitleClick(num)"這個方法，爲什麼加它呢——是因爲蒙層空白處的點擊方法對整個蒙層都生效，在文字上加上這個方法可以屏蔽掉蒙層點擊方法的影響，即使這個方法裏什麼也不做它也是有作用的，另外這個方法上加了stop是爲了防止它的點擊事件穿透到後面的div。代碼如下:

  　　 <!-- 列表 -->
    <div :class="{noScroll: isShowPopup}">
      <div class="item" v-for="num in 50" @click="itemClick(num)">
        <div style="width:100%">點擊item{{num}}</div>
      </div>
    </div>

　　 <!-- 蒙層 -->
    <div v-if="isShowPopup" class="popup" @click="popUpEmptyClick()">
      <div class="message">
        <p class="message-title" v-for="num in 30" @click.stop="messageTitleClick(num)">
          消息提示 {{num}}
        </p>
      </div>
    </div>

2. 給整個列表動態綁定的css如下:

/* 當前蒙層顯示時生效 */
.noScroll {
  overflow-y: hidden;
}

3. 給列表整個div動態綁定 .noScroll 後，底部列表照樣可以滑動，所以考慮繼續向上追溯。利用watch監聽蒙層是否顯示，當顯示時，設置body相應樣式；但蒙層消失時，body樣式恢復。但是在vue裏怎麼操作body裏，雖然vue是數據驅動的，不提倡直接操作Dom。但此刻我也是沒什麼好辦法了，就直接操作Dom了。如下：

 watch: {
  isShowPopup(newVal, oldVal) {
    if (newVal == true) {
      let cssStr = "overflow-y: hidden; height: 100%;";
      document.getElementsByTagName('html')[0].style.cssText = cssStr;
      document.body.style.cssText = cssStr;
    } else {
      let cssStr = "overflow-y: auto; height: auto;";
      document.getElementsByTagName('html')[0].style.cssText = cssStr;
      document.body.style.cssText = cssStr;
    }

    // 下面需要這兩行代碼，兼容不同瀏覽器
    document.body.scrollTop = this.pageScrollYoffset;
    window.scroll(0, this.pageScrollYoffset);
  }
}

demo地址與參考博客：

1. https://github.com/LiJinShi/wechat_back_vue
2. https://www.cnblogs.com/buerjj/p/7876057.html