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

  1. 云栖社区>
  2. 博客>
  3. 正文

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

asing1elife 2018-09-14 08:47:59 浏览666
展开阅读全文
版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82696872

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

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

更多精彩

解决办法

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

网友评论

登录后评论
0/500
评论
asing1elife
+ 关注