解决PC/移动端弹出层滚动穿透的问题。
描述
弹出层内容滚动时，body跟随滚动。
方案
法一： overflow: hidden;
- 步骤：
- 打开模态框时，给
body加上类名preventScroll； - 关闭模态框时，移除
body上的preventScroll类名。
- 打开模态框时，给
.preventScroll {
height: 100%;
overflow: hidden;
}
- 缺陷： 只适用于PC端，移动端上无效果。
法二： position: fixed
- 步骤：
- 打开模态框时，给
body加上类名preventScroll； - 关闭模态框时，移除
body上的preventScroll类名。
- 打开模态框时，给
.preventScroll {
position: fixed;
}
- 缺陷： 模态框打开后，body滚动位置还原为0。
法三： touchmove + preventDefault
** 注意： ** 此法只适用于模态框没有滚动内容的情况。
- 打开模态框时，阻止
touchmove
var $modal = $('.modal');
$modal.on("touchmove",function(e) {
e.preventDefault();
})
- 缺陷： 模态框内的滚动内容失去滚动效果。
法四（最佳方案）： position: fixed + scrollTop
-
步骤：
- 调用fixedBody()；
- 打开模态框；
- 关闭模态框；
- 调用looseBody()。
-
思路：
- 使用
position:fixed禁止body滚动； - 使用scrollTop、top值解决滚动记录丢失的bug。
- 使用
//打开模态框前调用
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 = 'static';
var top = body.style.top;
document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top);
body.style.top = '';
}
