解決小程序彈出層滾動穿透的問題


今天在做小程序的時候,遇到了一個棘手的問題,那就是彈出層的滾動穿透,即彈出層滾動,那么被彈出層覆蓋的下面的內容區域也會進行滾動,這一點就很麻煩了。彈出層我是用的view標簽然后使用的position:fixed進行的定位;說一下我的解決思路:

一:當彈出層里面無滾動的時候:

可以在遮罩的view標簽上定義一個防止事件冒泡的方法:

catchtouchmove="preventD";


 preventD() {
    return
  }

    二:當彈出層有滾動的時候:

在小程序里面一般滾動組件使用的是scroll-view,這個時候我們只需要在打開遮罩的時候給最外層的view標簽加上一個nowarp的標簽,關閉彈出層的時候吧class移除掉就可以了,

.noscroll {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
  z-index: 0;
}

  親測有效


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM