阻止滚动穿透：弹窗显示时，让背景页面禁止滚动

问题描述

在显示弹窗时，如果底部页面可滚动，可能在弹窗显示时，滚动鼠标，会发生滚动穿透，让底部页面也一起滚动了。这种用户体验是不太好的，怎么能阻止滚动穿透呢？

解决思路

让弹窗显示时，阻止背景的滚动事件，弹窗关闭时，重新恢复背景的滚动

示例（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 = ''
}