在项目中使用taro-ui框架的AtFloatLayout 组件弹出框时,蒙层下的页面如果有滚动 滑动组件时会造成滚动穿透,这就很烦!!!!
查看文档得知,taro不支持e.stopPropagation() 阻止滚动穿透
https://taro-docs.jd.com/taro/docs/vue-overall#%E9%98%BB%E6%AD%A2%E6%BB%9A%E5%8A%A8%E7%A9%BF%E9%80%8F
官方推荐样式解决:
当打开弹框时 设置顶级页面样式为
{
overflow:hidden;
height: 100vh;
}
但是当页面过长,设置完样式会滚动到顶部,显然体验不是很好,
问题地址:https://github.com/NervJS/taro/issues/5984
我的解决方案:
//定义一个变量
let scrollTop = 0
//将页面滚动的位置记录下来
@debounce(200)
onPageScroll(e) {
scrollTop = e.scrollTop
}
// 当弹框调用时 设置顶级页面的样式 使其脱离文档流:
{
position: fixed:relative;//根据状态使其回归文档流
top: `-${scrollTop}px`;
}
这样会有一个小问题,当你关闭弹框回归文档流的时候会会动顶部 待解决