微信小程序 弹框引发背景下~~~~页面滚动问题(滚动穿透问题)挪动端同理
之前遇到这个滚动传统问题始终没解决,最近终于抽出工夫钻研了一下,解决一个心头大患,啊啊啊~开心
下载demo
https://github.com/zhangrui-1...
体现景象:
在弹出遮罩背景和弹出内容时,滑动弹出内容,背景上面的内容也跟着滑动(具体查看景象https://github.com/zhangrui-1...)
解决思路:
将底页面设置position:fixed,且要设置以后弹框时所处地位的top值
H5页面获取形式:
scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
小程序获取形式:
wx.createSelectorQuery().select('#normal').boundingClientRect((rect) => { console.log(rect) scrollTop = rect.top console.log() this.setData({ ispopCoupon:true, scrollTop:scrollTop, noScroll:position:fixed;top:${scrollTop}~~~~ }) }).exec()`
当然在滚动事件时也须要在设置一下
H5
加一个 window.addEventListener
监听滑动
小程序
onPageScroll事件