摘要 今天小编跟大家讲解下有关移动端滚动穿透问题解决方案 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关移动端滚动穿透问题解

今天小编跟大家讲解下有关移动端滚动穿透问题解决方案 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关移动端滚动穿透问题解决方案 的相关资料，希望小伙伴们看了有所帮助。

移动端有可滚动的弹窗肯定会遇到的问题 滑动弹层背景跟着滚动 如果弹窗里面的内容不需要滚动的可以直接粗暴的把滚动事件禁用掉 但是如果弹窗内容过多需要滚动那就不可以这样做。以下这个解决办法在线上使用没有问题 可以大胆拿去用。

vue的解决办法

isShowDialog是控制弹窗显示的 监听isShowDialog的改变 对watch使用不明白的可以去看vue侦听器

watch：{// 如果 ` isShowDialog` 发生改变 这个函数就会运行,第一个参数是isShowDialog最新的值 isShowDialog（val){ this.scrollForbid(val) }}scrollForbid(val) { let body = document.body if（val){ // 弹窗显示的时候 this.scrollTop = window.scrollY body.style.width = '100%' body.style.position = 'fixed' body.style.top = -this.scrollTop + 'px' } else { // 弹窗关闭 body.style.width = '' body.style.position = '' body.style.top = '' window.srcollTo(0,this.scrollTop) }}原生js解决办法

如果用原生来写的话调用scrollForbid(val)方法 禁止滚动的时候传true 解除滚动传false过去就可以了。

原文：https://segmentfault.com/a/1190000022614730

来源：爱蒂网