解决Vue移动端弹窗滚动穿透

描述现象：

  • 弹窗内容滑动到底部，再向上滑动弹窗底部内容跟随滑动；

  • 弹窗内容滑动到顶部，再向下滑动弹窗底部内容跟随滑动；

解决办法：

在弹窗显示时，设置body的style的overflow属性值为hidden，弹窗关闭时恢复原来设置；

//解决弹窗遮罩滚动问题
toggleShadowIosScroll(visible) {
    document.body.style.overflow = visible ? 'hidden' : 'scroll';
},

若未生效，可再对id为app的div标签的style增加overflow设置，如下：

document.getElementById('app').style.overflow = visible ? 'hidden' : 'scroll'

代码库：https://github.com/zhang-hai/MySummary

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容