移动端滚动穿透问题解决方案

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

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)
    }
}

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

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

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_8957