欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue解决弹出框与背景页面出现两个滚动条的问题

程序员文章站 2022-05-30 18:30:12
...

首先,我遇到的是某个憨憨用transition(动画)写弹出框,导致弹出框有个滚动条,入口页面(以下简称背景页)也有一个滚动条,当弹出框显示时,背景页的滚动条仍起作用。vue解决弹出框与背景页面出现两个滚动条的问题
那么,我们要知道背景页的滚动条在哪个DOM节点上。
vue解决弹出框与背景页面出现两个滚动条的问题
我在两个DOM节点使用overflow:hidden;,找到起作用的节点位置。

解决方案(仅限于没用抽屉组件或者用动画写弹出框的’憨憨’):

一般使用布尔类型控制弹出框显示隐藏的话,可以使用watch监听控制样式

1.使用ocument.querySelector(‘body’)找到节点 body或者html
2.setAttribute(‘style’, ‘overflow:hidden;’)设置该节点滚动条隐藏样式
3.弹出框关闭时记得清除背景页滚动条隐藏样式document.body.removeAttribute(‘style’) 或
document.html.removeAttribute(‘style’)

代码如下:

watch: { //使用watch监听,判断弹出框是显示状态或隐藏状态
    showSlide: { //布尔类型变量
      handler(val) {  //true:显示弹出框,false:隐藏弹出框
        if (val) {
          document.querySelector('body').setAttribute('style', 'overflow:hidden;')
        } else {
          document.body.removeAttribute('style')
        }
      }
    }
  },
相关标签: 笔记 css vue