定義:移動端彈出fixed彈窗的話,在彈窗上滑動會導致下層的頁面跟着滾動,這個叫 “滾動穿透”
解決方案1
在彈出層的touchstart
事件中調用preventDefault
這種方法不可取,至少有3個缺點:
- 如果彈出層本身是有滾動(條)的話,將會導致彈出層無法滾動,此時用這種方法無異於飲鴆止渴。
- 一個很常見的場景,點擊彈出層,彈出層消失掉,此時也無法觸發彈出層的點擊回調事件。
- 彈出層內的任何事件都執行不了了。
解決方案2
此解決方案是解決方案1的升級版。
在彈出層的touchmove
(注意區別)事件中調用preventDefault
這種解決辦法沒有了第一種解決辦法的 2, 3 缺點。適用於彈出層本身有沒有滾動(條)。
解決方案3
設置body{overflow:hidden;}
缺點:經測試,在PC上支持良好,但是在IOS端,跟沒有設置是一樣的,完全不起任何作用!。
這種解決方案適用於PC端。
解決方案4
設置 html,body{overflow:hidden;}
在PC和移動端都能禁止掉下層的滾動。
缺點:
- 滾動位置丟失!頁面會回到頂部!
- 頁面的背景還是能夠有滾的動的效果(這個我沒遇到)。
可通過js來fix這個缺點,在彈出層出現時,記錄頁面的scrollTop,當彈出層消失時,把先前記錄的scrollTop再次賦予頁面。
終極完美解決方案
此解決方案能夠避免上述所有缺點。堪稱完美。
(這個方案會導致主頁面display:flex 的元素在彈框打開後消失)
css
body.dialog-open {
position: fixed;
width: 100%;
}
javascript
(function(){
var scrollTop = 0;
// 顯示彈出層
open.onclick = function(){
// 在彈出層顯示之前,記錄當前的滾動位置
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 = '';
}