移動端彈出層(簡稱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...