微信小程式 顯示彈框引發背景下頁面滾動問題(滾動穿透問題)移動端同理
阿新 • • 發佈:2020-12-17
**微信小程式 彈框引發背景下~~~~頁面滾動問題(滾動穿透問題)移動端同理**
之前遇到這個滾動傳統問題一直沒解決,最近終於抽出時間研究了一下,解決一個心頭大患,啊啊啊~開心
下載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事件