解决页面内弹窗弹出层时页面背景可滚动问题

2021-06-28  本文已影响0人  逸笛
  <div class="modelBox" v-show="openMusicListFlag"></div>
  watch: { // 使用watch监听,判断弹出框是显示状态或隐藏状态
    openMusicListFlag: { // 布尔类型变量,是否展示弹框
      handler (val) { // true:显示弹出框,false:隐藏弹出框
        if (val) {
          document.querySelector('body').setAttribute('style', 'overflow:hidden;')
        } else {
          document.body.removeAttribute('style')
        }
      }
    }
  },

一般使用布尔类型控制弹出框显示隐藏的话,可以使用watch监听控制样式
1.使用document.querySelector(‘body’)找到节点 body或者html
2.setAttribute(‘style’, ‘overflow:hidden;’)设置该节点滚动条隐藏样式
3.弹出框关闭时记得清除背景页滚动条隐藏样式document.body.removeAttribute(‘style’) 或
document.html.removeAttribute(‘style’)

上一篇下一篇

猜你喜欢

热点阅读