2021-07-09 Vue 解决移动端滑动穿透问题

当页面有弹窗时,并且这个弹窗有滚动事件时,这时候会遇到bug,最底部的内容区域会跟着滚动,导致弹窗滚动不生效,以下是解决方案:

//cityPop 控制弹窗的显示和隐藏
watch:{
            cityPop(val){
                if(val){
                    document.body.style.overflow = 'hidden'
                    document.addEventListener('touchmove', preD, {passive: false}) // 禁止页面滑动
                }else {
                    document.body.style.overflow = '' // 出现滚动条
                    document.removeEventListener('touchmove', preD, {passive: false})
                }
            }
        }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容