css PC端弹窗时禁止底部页面滚动

代码：

<script>
export default {
  name: "",
  data () {
    return {
      showDlg: false
    }
  },
  watch: {
  },
  created () {
  },
  mounted () {   
  },
  methods: { 
    openHandle () {
      /** ------------------ 跳出弹窗页面禁止滚动设置开始 ------------------ */
      // 出现弹窗时，为body元素添加position:fixed，这样主页面就禁止滑动，同时很好地解决了弹窗穿透的问题。
      // 获取原来的scrollTop 并将body的top修改为对应的值
      this.prevBodyStyle_scrollTop = document.body.scrollTop || document.documentElement.scrollTop
      this.prevBodyStyle_top = window.getComputedStyle(document.body, null).getPropertyValue('top')
      document.body.style.top = `-${this.prevBodyStyle_scrollTop}px`
      // 获取原来body的position 为了解决iOS上光标漂移的问题 将position修改为fixed
      this.prevBodyStyle_position = window.getComputedStyle(document.body, null).getPropertyValue('position')
      document.body.style.position = 'fixed'
      // 为了避免width空值的情况
      this.prevBodyStyle_width = window.getComputedStyle(document.body, null).getPropertyValue('width')
      document.body.style.width = '100%'
      /** ------------------ 跳出弹窗页面禁止滚动设置结束 ------------------ */

      // 打开弹窗
      this.hideOrShowDlg()      
    },
    closeHandle () {
      /** ------------------ 关闭弹窗时移除禁止页面滚动设置开始 ------------------ */
      document.body.style.top = this.prevBodyStyle_top || '0px'
      document.body.style.position = this.prevBodyStyle_position
      document.body.style.width = this.prevBodyStyle_width || '100%'
      document.body.scrollTop = document.documentElement.scrollTop = this.prevBodyStyle_scrollTop || 0
      /** ------------------ 关闭弹窗时移除禁止页面滚动设置结束 ------------------ */

      // 关闭弹窗
      this.hideOrShowDlg()
    },
    hideOrShowDlg(){
      this.showDlg = !this.showDlg
    }
  }
}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

页面效果：