解决各种弹出层滑动,导致底层跟随滑动,body跟随滑动的问题

2021-1-26 18:21:39
学习记录
127

解决各种弹出层滑动,导致底层跟随滑动,body跟随滑动的问题

document.body.style.overflow = 'hidden';
<div class="mask" v-if="show" @touchmove.prevent></div>

如果是ios低版本手机, vue 组件,body跟随弹出层一起滑动,需要再添加如下处理

html { overflow: hidden; height: 100%; } body { overflow: scroll; height: 100%; }

原理:给对应元素添加滑动事件监听,组织滑动。

特别地方在老版本iOS 的浏览器中,认为 body 是一个整体,跟 html 行为一致,因此需要给 html 设置隐藏,当滑动的话,给body 设置高度等于html,也就是页面宽度

移动端兼容

avatar

Sky(小新)

个人签名: 提升能力,创造价值!

江苏-南京
skylpz@qq.com