滚动穿透解决方案

解决PC/移动端弹出层滚动穿透的问题。

描述

弹出层内容滚动时，body跟随滚动。

方案

法一： overflow: hidden;

• 步骤：
  1. 打开模态框时，给body加上类名preventScroll；
  2. 关闭模态框时，移除body上的preventScroll类名。

.preventScroll {
    height: 100%;
    overflow: hidden;
}

• 缺陷： 只适用于PC端，移动端上无效果。

法二： position: fixed

• 步骤：
  1. 打开模态框时，给body加上类名preventScroll；
  2. 关闭模态框时，移除body上的preventScroll类名。

.preventScroll {
    position: fixed;
}

• 缺陷： 模态框打开后，body滚动位置还原为0。

法三： touchmove + preventDefault

** 注意： ** 此法只适用于模态框没有滚动内容的情况。

• 打开模态框时，阻止touchmove

var $modal = $('.modal');
$modal.on("touchmove",function(e) {
  e.preventDefault();  
})

• 缺陷： 模态框内的滚动内容失去滚动效果。

法四（最佳方案）： position: fixed + scrollTop

• 步骤：

  1. 调用fixedBody()；
  2. 打开模态框；
  3. 关闭模态框；
  4. 调用looseBody()。

• 思路：

  1. 使用position:fixed禁止body滚动；
  2. 使用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 = '';
}

参考

• 移动端滚动穿透问题
• 移动端滚动穿透问题解决方案