移动端滑动穿透的解决方案

公司有个项目用的vux，但是存在滑动穿透，就是整个页面有滚动条，pop弹出框也有滚动条，但是在pop滑动时，会滑动整个页面的滚动条，而我们希望当出现弹出框时，操作不要涉及到后面的页面。
滑动穿透本质上是因为弹出框和后面的页面是兄弟的层级，所以当用户操作时，弹出框和页面都出现了滑动。
第一种办法是监听弹出框显示事件，当唤起pop时，body变为overflow：hidden。pop消失时，overflow为auto。但这种办法存在兼容的问题，有的安卓不起作用。
还有一种办法，当pop弹出时，body的position设为fixed，但这时top是为0的，所以页面的位置发生了变化，我们来解决一下这个办法，代码如下

let top = 0
let showPop = false
watchPop (showPop) {
        if (showPop) {
            // document.getElementsByTagName('body')[0].style.overflow = 'hidden'
            let body = document.getElementsByTagName('body')[0]
            let app = document.getElementById('app')
            let scrollTop = -app.getBoundingClientRect().top
            top = scrollTop > app.offsetHeight ? (app.offsetHeight - window.innerHeight) : scrollTop //
            body.style.top = (-top) + 'px'
            body.style.position = 'fixed'
        } else {
            // document.getElementsByTagName('body')[0].style.overflow = 'auto'
            let body = document.getElementsByTagName('body')[0]
            body.style.position = null
            console.log(top)
            window.scrollTo(0, top)
        }
    }

以上方法需要获取pop弹出的时机，在vue里可以watch pop对应show的状态。但此时如果页面很多，或者用到pop的地方很多，watch pop就会是一个重复编写的过程，有多少个pop，watch多少次。解决这个问题最好的办法是自己封装一个组件，把pop放到自己的组件，页面引进自己的组件，在自己的组件处理。但如果已经有很多地方用了，也没关系，下面就是解决方案

let top = 0
const watchPop = (showPop) => {
    if (showPop) {
        // document.getElementsByTagName('body')[0].style.overflow = 'hidden'
        let body = document.getElementsByTagName('body')[0]
        let app = document.getElementById('app')
        let scrollTop = -app.getBoundingClientRect().top
        console.log(scrollTop)
        top = scrollTop > app.offsetHeight ? (app.offsetHeight - window.innerHeight) : scrollTop
        console.log(top)
        body.style.top = (-top) + 'px';
        body.style.position = 'fixed';
    } else {
        // document.getElementsByTagName('body')[0].style.overflow = 'auto'
        let body = document.getElementsByTagName('body')[0];
        body.style.position = null
        console.log(top)
        window.scrollTo(0, top)
    }
}
let showPop = false
setTimeout(() => {
    let targets = document.querySelectorAll('.vux-popup-mask')
    console.log(targets.length)
    targets.forEach(target => {
        var options = {
            attributes: true // 只观察class属性
        }
        var mb = new MutationObserver(function (mutationRecords) {
            mutationRecords.forEach(record => {
                if (String(record.target.getAttribute('class')).indexOf('vux-popup-show') === -1) {
                    // 不包含.vux-popup-show，pop没有打开
                    if(showPop) { // pop标记处于打开
                        showPop = false // 将pop标记为关闭
                        watchPop(showPop)
                    }
                } else {
                    if(showPop === false) {
                        showPop = true
                        watchPop(showPop)
                    }
                }
            })
        })
        mb.observe(target, options)
    })
}, 2500)

如果把以上代码放到mian.js，需要settimeout,因为main.js里无法直接获得对应路由的mounted回调。但仍然有风险，如果首页接口请求时间过长，大于2500毫秒，还是解决不了。所以把以上代码抽成mixin，在所需要的组件路由中引入mixin，就解决问题了

watchPopMixin () {
        return {
            methods: {
                watchPop(showPop) {
                    if (showPop) {
                        // document.getElementsByTagName('body')[0].style.overflow = 'hidden'
                        let body = document.getElementsByTagName('body')[0]
                        let app = document.getElementById('app')
                        let scrollTop = -app.getBoundingClientRect().top
                        top = scrollTop > app.offsetHeight ? (app.offsetHeight - window.innerHeight) : scrollTop
                        body.style.top = (-top) + 'px';
                        body.style.position = 'fixed';
                    } else {
                        // document.getElementsByTagName('body')[0].style.overflow = 'auto'
                        let body = document.getElementsByTagName('body')[0];
                        body.style.position = null
                        window.scrollTo(0, top)
                    }
                },
                initObserver () {
                    let targets = document.querySelectorAll('.vux-popup-mask')
                    let self = this
                    targets.forEach(target => {
                        let options = {
                            attributes: true // 只观察class属性
                        }
                        let mb = new MutationObserver((mutationRecords) => {
                            mutationRecords.forEach(record => {
                                if (String(record.target.getAttribute('class')).indexOf('vux-popup-show') === -1) {
                                    // 不包含.vux-popup-show，pop没有打开
                                    if(showPop) { // pop标记处于打开
                                        showPop = false // 将pop标记为关闭
                                        self.watchPop(showPop)
                                    }
                                } else {
                                    if(showPop === false) {
                                        showPop = true
                                        self.watchPop(showPop)
                                    }
                                }
                            })
                        })
                        mb.observe(target, options)
                    })
                }
            },
            mounted() {
                setTimeout(() => {this.initObserver()}, 2500)
            }
        }
    }

我这里将以上代码放到uitls文件里了，主要是不想再创建一个文件,所以引用方式如下

mixins: [utils.watchPopMixin()],