关于小程序:微信小程序-显示弹框引发背景下页面滚动问题滚动穿透问题移动端同理

4次阅读

共计 640 个字符，预计需要花费 2 分钟才能阅读完成。

微信小程序弹框引发背景下~~~~ 页面滚动问题（滚动穿透问题）挪动端同理
之前遇到这个滚动传统问题始终没解决，最近终于抽出工夫钻研了一下，解决一个心头大患，啊啊啊~ 开心
下载 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 事件

正文完