解決PC/移動端彈出層滾動穿透的問題芬首。
描述
彈出層內(nèi)容滾動時，body跟隨滾動。
方案
法一： overflow: hidden;
- 步驟：
- 打開模態(tài)框時奖地，給
body加上類名preventScroll系宫； - 關閉模態(tài)框時礁击，移除
body上的preventScroll類名恰画。
- 打開模態(tài)框時奖地，給
.preventScroll {
height: 100%;
overflow: hidden;
}
- 缺陷： 只適用于PC端辙纬，移動端上無效果看彼。
法二： position: fixed
- 步驟：
- 打開模態(tài)框時廊佩，給
body加上類名preventScroll； - 關閉模態(tài)框時靖榕，移除
body上的preventScroll類名标锄。
- 打開模態(tài)框時廊佩，給
.preventScroll {
position: fixed;
}
- 缺陷： 模態(tài)框打開后，body滾動位置還原為0茁计。
法三： touchmove + preventDefault
** 注意： ** 此法只適用于模態(tài)框沒有滾動內(nèi)容的情況料皇。
- 打開模態(tài)框時，阻止
touchmove
var $modal = $('.modal');
$modal.on("touchmove",function(e) {
e.preventDefault();
})
- 缺陷： 模態(tài)框內(nèi)的滾動內(nèi)容失去滾動效果簸淀。
法四（最佳方案）： position: fixed + scrollTop
-
步驟：
- 調(diào)用fixedBody()瓶蝴；
- 打開模態(tài)框；
- 關閉模態(tài)框租幕；
- 調(diào)用looseBody()舷手。
-
思路：
- 使用
position:fixed禁止body滾動； - 使用scrollTop劲绪、top值解決滾動記錄丟失的bug男窟。
- 使用
//打開模態(tài)框前調(diào)用
function fixedBody() {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
document.body.style.cssText += 'position:fixed;top:-' + scrollTop + 'px;';
}
//關閉模態(tài)框后調(diào)用
function looseBody() {
var body = document.body;
body.style.position = 'static';
var top = body.style.top;
document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top);
body.style.top = '';
}
