移动端弹出遮罩层时防止底部页面滚动

如果底部页面内容过多出现滚动条,此时弹出遮罩层后,在遮罩层滑动页面也会导致底部页面响应滚动操作

解决办法

  1. 监听遮罩层的打开和关闭
    • 打开时设置底部页面的 position: fixed
    • 关闭时恢复默认布局 position: static
1
2
3
4
5
6
7
8
9
watch: {
  'popupVisible'(val) {
    if (val) {
      this.$refs.portal.style.position = 'fixed'
    } else {
      this.$refs.portal.style.position = 'static'
    }
  }
}