搞定滚动穿透

一、什么是滚动穿透？

当页面A打开弹窗B后，滚动B的内容时，A页面也会随之滚动------这种现象称为滚动穿透 。其本质是：浏览器的「系统滚动」机制导致滚动事件冒泡到了父容器。

二、核心原理：系统滚动与浏览器渲染机制

系统滚动的定义

当HTML和BODY元素的高度超过视口高度时，浏览器会启用默认的「系统滚动」（即整个页面的滚动条）。此时，滚动事件会作用于整个页面，即使在弹窗内滚动，事件也会向上冒泡，触发父页面的滚动。
为什么会穿透？
- 常规布局中，页面滚动的容器是body或html，滚动事件会冒泡到根节点。
- 弹窗B通常是body的子元素，当B滚动到边界时，滚动事件会继续向上传递，导致body也随之滚动。

三、CSS「黑魔法」的底层逻辑

用户提到的CSS方案：

css 复制代码

/* 弹窗打开时应用 */
body, html {
    position: fixed;
    height: 100%;
    width: 100%;
    overflow: scroll;
}

原理拆解：

position: fixed的作用
- 将body和html脱离正常文档流，使其定位相对于视口（而非文档）。此时，滚动容器从「整个页面」变为「body元素自身」，切断了系统滚动的冒泡路径。
height: 100%和width: 100%
- 强制元素覆盖整个视口，避免因定位改变导致的布局偏移。
overflow: scroll
- 手动启用body的滚动条，替代浏览器的系统滚动。此时，滚动事件被限制在body内部，不会影响父容器。

四、两种解决方案对比与实现

方案1：CSS动态切换（更推荐）

核心思路：弹窗打开时禁用系统滚动，关闭时恢复。

css 复制代码

/* 基础样式 */
body {
    position: relative;
    overflow: scroll;
    height: 100vh; /* 关键：明确视口高度 */
}

/* 弹窗打开时添加的类名 */
.body-fixed {
    position: fixed;
    width: 100%;
    height: 100vh;
    overflow: scroll;
}

JS控制逻辑：

javascript 复制代码

// 打开弹窗时
function openPopup() {
    document.body.classList.add('body-fixed');
    // 记录原始滚动位置（可选，避免定位切换时的跳动）
    window.originalScrollTop = document.body.scrollTop;
}

// 关闭弹窗时
function closePopup() {
    document.body.classList.remove('body-fixed');
    // 恢复滚动位置（可选）
    if (window.originalScrollTop !== undefined) {
        document.body.scrollTop = window.originalScrollTop;
    }
}

方案2：JS拦截滚动事件

核心思路：阻止滚动事件冒泡，手动控制滚动位置。

javascript 复制代码

// 打开弹窗时
function openPopup() {
    // 记录当前滚动位置
    const scrollTop = document.body.scrollTop;
    
    // 阻止body滚动
    document.body.style.overflow = 'hidden';
    document.body.style.position = 'fixed';
    document.body.style.top = `-${scrollTop}px`;
    document.body.style.width = '100%';
}

// 关闭弹窗时
function closePopup() {
    const scrollTop = -parseInt(document.body.style.top, 10);
    document.body.style.removeProperty('overflow');
    document.body.style.removeProperty('position');
    document.body.style.removeProperty('top');
    document.body.style.removeProperty('width');
    document.body.scrollTop = scrollTop;
}

五、两种方案的优缺点对比

方案	优点	缺点	适用场景
CSS动态切换	代码简洁，性能消耗低	可能影响弹窗外的布局动画	普通弹窗、简单页面
JS事件拦截	控制更精准，兼容复杂布局	代码量稍大，需处理边界情况	移动端、复杂交互场景

六、注意事项与兼容性处理

移动端适配
- iOS 15+ 对position: fixed的滚动有优化，但低版本可能出现卡顿，建议搭配-webkit-overflow-scrolling: touch使用。
- 安卓端需注意fixed定位可能导致的滚动条样式异常，可通过::-webkit-scrollbar自定义样式。
布局抖动问题
- 切换position: fixed时，页面可能出现轻微抖动，可通过提前记录并恢复scrollTop解决（如方案1的JS部分）。
替代方案
- 若上述方案无效，可尝试在弹窗外层添加透明遮罩，并对遮罩设置pointer-events: none，阻止事件传递到父页面。

七、总结

滚动穿透的本质是浏览器系统滚动的事件冒泡问题，通过CSS定位切换或JS事件拦截，可将滚动容器从「整个页面」变为「弹窗自身」，从而切断穿透路径。CSS方案简单高效，JS方案灵活强大，可根据项目需求选择合适的实现方式。