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

简介: 版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82696872 ...
版权声明:本文首发 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'
    }
  }
}
AI 代码解读
目录
打赏
0
0
0
0
5
分享
相关文章
小程序顶部自定义导航栏添加背景图的实现
小程序顶部自定义导航栏添加背景图的实现
217 0
导航栏也疯狂:CSS动画让导航栏活起来,跟随鼠标滑动!
导航栏也疯狂:CSS动画让导航栏活起来,跟随鼠标滑动!
|
7月前
|
vue 页面向下滚动到指定位置时,顶部显示悬浮搜索框
vue 页面向下滚动到指定位置时,顶部显示悬浮搜索框
162 1
|
7月前
|
vue点击瞄点平滑滚动 | 锚点随页面滚动高亮显示 | 点击平滑滚动到页面顶部
vue点击瞄点平滑滚动 | 锚点随页面滚动高亮显示 | 点击平滑滚动到页面顶部
190 1
|
7月前
|
Vue 动画 —— 滑动切换动画 / 滑动翻页过渡动画——从顶部到底部、从底部到顶部、从左侧到右侧、从右侧到左侧
Vue 动画 —— 滑动切换动画 / 滑动翻页过渡动画——从顶部到底部、从底部到顶部、从左侧到右侧、从右侧到左侧
877 0
|
9月前
自定义滑动工具栏
自定义滑动工具栏
59 0
随着页面的滚动导航条跟着滚动
随着页面的滚动导航条跟着滚动