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

2022-02-04 06:28:20 字數 620 閱讀 6363

移動端彈出層(簡稱layer)時,層內有大量文字需要滾動,但是背景層(簡稱body)會隨著layer的滾動而滾動,使用者體驗較差。參考了網上的一些資料,總結解決方案如下:

.scrollfix

.scrollfix body

彈出層前:

//防止body層向下滾動後出現內容顯示不全的問題

$('html,body').animate(, 100);

$('html').addclass('scrollfix');

彈出層關閉後(一般是層的關閉**):

$('html').removeclass('scrollfix');

還有一種禁用背景層touchmove事件的方法

function showlayer() }或者

function fscrollfix(e)

bgdom.addeventlistener('touchmove',fscrollfix,false);

function closelayer()}或者

bgdom.removeeventlistener('touchmove',fscrollfix,false);

bgdom為背景層dom物件,此方案筆者實驗未成功

參考:

移動端 pc端,遮罩層滾動穿透問題

常見的解決方式有一下三種 model open遮罩層顯示時將 modal open 新增到 html上,刪除多餘一頁的部分,禁止頁面滾動。遮罩層隱藏時,移除.modal open,恢復頁面滾動即可 缺點 實現滾動條無法滾動 var mo function e 禁止滑動 function stop 取...

移動端滾動穿透問題

一 body。一般pc端這樣就行了,但在移動端可就不行了,因為他有touchmove。二 可以阻止彈層的touchmove事件,但如果你的彈層內的內容需要滑動,這種方法pass document.body.addeventlistener touchmove function e 三 後來找到乙個比...

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

乙個棘手的問題 彈出層的滾動穿透,即彈出層滾動,那麼被彈出層覆蓋的下面的內容區域也會進行滾動。彈出層我是用的view標籤然後使用的position fixed進行的定位 說一下我的解決思路 一 當彈出層裡面無滾動的時候 可以在遮罩的view標籤上定義乙個防止事件冒泡的方法 catchtouchmov...