滾動穿透問題

2022-05-03 01:12:07 字數 609 閱讀 1491

眾所周知,移動端有fixed遮罩或彈出層時,螢幕上滑動,後面的背景也會跟著滾動,強迫症的我總是覺得不舒服。然而也沒有找到完美的解決方法。

這裡說說兩種能用的方法。

1、遮罩或彈層沒有滾動的內容時:

vue裡提供了乙個很好用的解決辦法:@touchmove.prevent

如果不用vue的話,那就監聽touchmove事件,然後阻止事件的預設行為(e.preventdefault())

2、當遮罩或彈層裡有可以滾動的內容時,上面的方法就不行了。

這時候的解決思路就是,點選彈出遮罩時,獲取下當前文件滾動條的位置,然後設定body不可滾動。關閉彈層的時候,恢復頁面可滾動並且滾動到遮罩彈出時的位置,例如。

let h = ''

//點選顯示彈窗

$(".xieyi span").click(function

() )

//body不可滑動

function

bodynotscroll()

//點選關閉彈窗

$(".xieyitip span").click(function

())

function

reset()

移動端滾動穿透問題

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

滾動穿透問題完美解決方案

滾動穿透 簡單的說,滾動穿透就是彈層中有滾動時,滾動彈層滾動條背景下面內容也會滾動 目標 彈層滾動時,背景下面內容不會滾動,彈出層關閉後頁面的滾動位置仍在原處不會丟失!下面這段 直接引用,看效果 open modal one open modal two 這裡是可滾動內容 滾動 content 滾動...

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

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