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

2021-09-10 03:37:00 字數 380 閱讀 1760

滾動穿透:簡單的說,滾動穿透就是彈層中有滾動時,滾動彈層滾動條背景下面內容也會滾動;

目標:彈層滾動時,背景下面內容不會滾動,彈出層關閉後頁面的滾動位置仍在原處不會丟失!

下面這段**直接引用,看效果;

open modal one

open modal two

這裡是可滾動內容

滾動 content

滾動 content

滾動 content

滾動 content

滾動 content

滾動 content

滾動 content

滾動 content

滾動 content

滾動 content

滾動 content

scroll 滾動穿透的解決方案

適用所有頁面有滾動且有彈出的情況,禁止彈層上滑動行為觸發底層頁面的滾動 頁面有滾動條,當有彈層彈出時,彈出層上touchmove事件會觸發底層頁面滾動 scrollview的高度固定,內部view的高度自由撐開,大於scrollview的高度時就會出現滾動條需要滾動的內容 如果出現彈層,在彈層彈出時...

123 移動端滾動穿透完美解決方案加原理描述

所謂滾動穿透,指我們滑動頂層的彈窗,但效果上卻滑動了底層的內容。出現該問題的大前提 例如 vue cli中包裹的最外層html body沒有設定height 100 overflow hidden 在手機上開啟頁面。chrome上觀測不到!高維世界?chrome的移動端除錯模擬器是看不見任何問題的 ...

移動端頁面滾動穿透問題解決方案

最近在做移動專案時遇到乙個頁面滾動穿透問題,具體場景是這樣的,在乙個可滾動的列表頁中開啟彈窗,底部的頁面理論上是不可滾動的,但是當滑動彈窗時,底部頁面會跟隨滾動,這就是所謂的頁面滾動穿透的問題。這個是比較常見的問題,基本都會遇到,google一下出解決方案也是挺多的。以下根據不同的適用場景總結一些解...