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

2021-10-03 11:30:51 字數 518 閱讀 4035

乙個棘手的問題:彈出層的滾動穿透,即彈出層滾動,那麼被彈出層覆蓋的下面的內容區域也會進行滾動。彈出層我是用的view標籤然後使用的position:fixed進行的定位;說一下我的解決思路:

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

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

catchtouchmove="preventd"

preventd()

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

只需要在開啟遮罩的時候給最外層的view標籤加上乙個nowarp的標籤,關閉彈出層的時候吧class移除掉就可以了,

.noscroll

h5然後還有乙個鍵盤彈起不回彈,焦點錯位的問題(注意原生)

//鍵盤頂起頁面後隱藏不回彈解決方案

clearsrcoll() , 1);

},

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

最近在做彈窗的時候遇到的問題,就是遮罩後面的內容可以滾動,查詢資源發現是兩種情況,一是遮罩層有滾動元件,乙個是遮罩層沒有滾動元件,下面就來說說如何解決這兩種情況。使用前後對比 一 當彈出層裡面無滾動的時候 可以在遮罩的view標籤上定義乙個防止事件冒泡的方法 catchtouchmove preve...

移動端彈出層滾動穿透問題總結

移動端彈出層 簡稱layer 時,層內有大量文字需要滾動,但是背景層 簡稱body 會隨著layer的滾動而滾動,使用者體驗較差。參考了網上的一些資料,總結解決方案如下 scrollfix scrollfix body 彈出層前 防止body層向下滾動後出現內容顯示不全的問題 html,body a...

解決彈出框滾動穿透的問題(問題是body也會滾動)

參考 感謝分享 案例頁面 view source 第一步 給body加上個css類別樣式 body.modal open 第二部 建立核心函式 modalhelper helpers resolve the modal scrolling issue on mobile devices requir...