1.overflow:hidden
但是存在的缺陷是你的網頁會回滾到頂部
2:js阻止滾動事件
但是彈窗內的元素會無法滾動
3:fixed 加上js記錄滾動的位置
這個方案應該是所有文章提到的最優方案，但是其實吧我並不喜歡這種方案，改變body或者其他父級元素的position可能會影響到子集元素的flex等布局，而且一旦單頁面的布局變得複雜，如果出現布局問題修改起來相當繁瑣
我的解決方案也許算不上是最優的解決方案，但是對我而言已經是表現出了極大的可行性
布局的角度分析問題
方案主要是在上面的方案一的基礎上解決問題overflow：hidden，之前提到過這個方案存在乙個缺點，那就是當頁面產生滾動的是時候，此時出現彈窗頁面會回滾到最頂部，那麼，現在的我們只要解決回滾的問題就可以滿足我們的需求，我的原則就是這樣的需求能不用js就不用js?
|-body(高度100%)
|-div（任意高度隨意，自動撐大，即不設定css也可以）
此布局下問題就已經得到解決，當彈窗出現的時候設定body為overflow：hidden，此時遮罩層底部的頁面已經無法滾動，並且不會回到頂部
但是問題依然存在乙個bug 那就是在-webkit-overflow-scrolling：touch下ios端會有很高的機率出發頁面的毫秒級的閃爍，可能是因為此時觸發了ios的頁面的重新計算滾動高度原因，解決這個問題的方案就是在body下面新增perspective:1,使用css3這個特性的原因是開啟gpu加速，可能會使得渲染結果得到快取吧，美中不足，這裡需要用到js 因為只有ios端需要這個perspective這樣的css3引數，安卓端務必不要新增
上面的布局樣式只是提供乙個思路，自己視專案的布局重新定義
移動端滾動穿透解決方法
當頁面中出現彈層時，彈層頁面滾動也會引起body的滾動，解決方法如下 開啟彈層時獲取當前頁面的滾動值，並給body設定position fixed top 當前頁面的滾動值 var scrollpx body scrolltop body addclass openfixed body css to...
123 移動端滾動穿透完美解決方案加原理描述
所謂滾動穿透，指我們滑動頂層的彈窗，但效果上卻滑動了底層的內容。出現該問題的大前提 例如 vue cli中包裹的最外層html body沒有設定height 100 overflow hidden 在手機上開啟頁面。chrome上觀測不到！高維世界?chrome的移動端除錯模擬器是看不見任何問題的 ...
移動端滾動穿透問題
一 body。一般pc端這樣就行了，但在移動端可就不行了，因為他有touchmove。二 可以阻止彈層的touchmove事件，但如果你的彈層內的內容需要滑動，這種方法pass document.body.addeventlistener touchmove function e 三 後來找到乙個比...