阻止滾動穿透：彈窗顯示時，讓背景頁面禁止滾動

問題描述

在顯示彈窗時，如果底部頁面可滾動，可能在彈窗顯示時，滾動鼠標，會發生滾動穿透，讓底部頁面也一起滾動了。這種用戶體驗是不太好的，怎麼能阻止滾動穿透呢？

解決思路

讓彈窗顯示時，阻止背景的滾動事件，彈窗關閉時，重新恢復背景的滾動

示例（vue）

<div>
原背景頁面
</div>
// 假設如下是一個簡略的彈窗元素
<div v-if="showDialog" class="dialog" ref="dialog">
  <div class="dialog-content">
    此處省略一萬字......
  </div>
</div>
// 可如下設置，當彈窗顯示時，阻止背景頁面滾動
// 在顯示彈窗的方法中，修改body元素樣式（可根據實際情況修改對應的背景元素）
methods: {
    // 顯示彈窗
    showList (i) {
      this.showDialog = true
      // 背景禁止滾動
      document.querySelector('body').style.overflow = 'hidden'
    },
    // 關閉彈窗
    closeDialog () {
      this.showDialog = false
      // 背景恢復滾動
      document.querySelector('body').style.overflow = ''
    },
}

mounted() {
    // 彈窗顯示時，增加監聽事件，阻止默認行爲
    this.fn = (e) => {
      e.preventDefault()
    }
    this.$refs.healthplan.querySelector('.dialog').addEventListener('touchmove', this.fn)
},
// 頁面銷燬時，移除監聽事件
beforeDestroy() {
    this.$refs.healthplan.querySelector('.dialog ').removeEventListener('touchmove', this.fn)
    document.querySelector('body').style.overflow = ''
}