定義：移動端彈出fixed彈窗的話，在彈窗上滑動會導(dǎo)致下層的頁面跟著滾動，這個叫 “滾動穿透”

解決方案1

在彈出層的touchstart事件中調(diào)用preventDefault

這種方法不可取，至少有3個缺點(diǎn)：

如果彈出層本身是有滾動（條）的話，將會導(dǎo)致彈出層無法滾動，此時用這種方法無異于飲鴆止渴。

一個很常見的場景，點(diǎn)擊彈出層，彈出層消失掉，此時也無法觸發(fā)彈出層的點(diǎn)擊回調(diào)事件。

彈出層內(nèi)的任何事件都執(zhí)行不了了。

解決方案2

此解決方案是解決方案1的升級版。

在彈出層的touchmove（注意區(qū)別）事件中調(diào)用preventDefault

這種解決辦法沒有了第一種解決辦法的 2, 3 缺點(diǎn)。適用于彈出層本身有沒有滾動（條）。

解決方案3

設(shè)置body{overflow:hidden;}

缺點(diǎn)：經(jīng)測試，在PC上支持良好，但是在IOS端，跟沒有設(shè)置是一樣的，完全不起任何作用！。

這種解決方案適用于PC端。

解決方案4

設(shè)置 html,body{overflow:hidden;}

在PC和移動端都能禁止掉下層的滾動。

缺點(diǎn)：

滾動位置丟失！頁面會回到頂部！

頁面的背景還是能夠有滾的動的效果（這個我沒遇到）。

可通過js來fix這個缺點(diǎn)，在彈出層出現(xiàn)時，記錄頁面的scrollTop，當(dāng)彈出層消失時，把先前記錄的scrollTop再次賦予頁面。

終極完美解決方案

此解決方案能夠避免上述所有缺點(diǎn)。堪稱完美。

（這個方案會導(dǎo)致主頁面display:flex 的元素在彈框打開后消失）
css

body.dialog-open {position: fixed;width: 100%; }

javascript

(function(){var scrollTop = 0;// 顯示彈出層open.onclick = function(){ // 在彈出層顯示之前，記錄當(dāng)前的滾動位置scrollTop = getScrollTop(); // 使body脫離文檔流document.body.classList.add('dialog-open'); // 把脫離文檔流的body拉上去！否則頁面會回到頂部！document.body.style.top = -scrollTop + 'px';mask.style.display = 'block';} // 隱藏彈出層close.onclick = function(){mask.style.display = 'none'; // body又回到了文檔流中（我胡漢三又回來啦！）document.body.classList.remove('dialog-open');// 滾回到老地方to(scrollTop);}function to(scrollTop){document.body.scrollTop = document.documentElement.scrollTop = scrollTop;}function getScrollTop(){return document.body.scrollTop || document.documentElement.scrollTop;} }());

解決滾動穿透的2個工具方法：

function fixedBody(){var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;document.body.style.cssText += 'position:fixed;top:-'+scrollTop+'px;'; }function looseBody() {var body = document.body;body.style.position = '';var top = body.style.top;document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top);body.style.top = ''; }

轉(zhuǎn)自：https://github.com/pod4g/tool/wiki/移動端滾動穿透問題

總結(jié)

以上是生活随笔為你收集整理的移动端滚动穿透问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。