移動端滾動穿透問題

2021-08-29 04:50:50 字數 359 閱讀 3138

一、body。一般pc端這樣就行了,但在移動端可就不行了,因為他有touchmove。

二、可以阻止彈層的touchmove事件,但如果你的彈層內的內容需要滑動,這種方法pass

document.body.addeventlistener('touchmove' , function(e))
三、後來找到乙個比較簡單粗暴的方法

body,html 

// top值可以用js獲取你當前的scrolltop

//彈窗

如果彈窗列表滑動到最底部還是會引起body滾動時,可以給body加上一段css樣式:,在關閉彈出層時,去掉這段樣式就可以了

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

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

VUE移動端 模態框滾動穿透問題

1 v show顯示模態框 2 watch 監聽模態框 的變化 watch 3 在ishidden值發生變化的時候,a 阻止瀏覽器的預設行為,同時禁止頁面滾動 scrollstop document.body.style.overflow hidden document.addeventlisten...

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

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