微信小程序 顯示彈框引發背景下頁面滾動問題（滾動穿透問題）移動端同理

**微信小程序 彈框引發背景下~~~~頁面滾動問題（滾動穿透問題）移動端同理**
之前遇到這個滾動傳統問題一直沒解決，最近終於抽出時間研究了一下，解決一個心頭大患，啊啊啊~開心
下載demo
https://github.com/zhangrui-1993/miniProgram
* * *

 

 

**表現現象：**
在彈出遮罩背景和彈出內容時，滑動彈出內容，背景下面的內容也跟着滑動

**解決思路：**
將底頁面設置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事件