滚动穿透问题需在wheel/touchmove阶段拦截：modal上用capture+passive:false监听并preventdefault，配合body overflow:hidden及overscroll-behavior:contain。
在模态框（Modal）、抽屉（Drawer）或全屏弹层等场景中，当用户在浮层内滚动时，若内容高度不足或已到边界，浏览器会“穿透”到背景页面继续滚动——这就是滚动穿透问题。本质是：滚动事件在捕获或冒泡阶段触发了 body 或 document 的默认滚动行为。要阻止它，关键不是单纯调用 event.stopPropagation()，而是精准干预滚动事件的传播与默认行为。
理解滚动事件的传播时机
滚动事件（scroll）本身不冒泡（规范定义），但触控/鼠标滚轮类操作（如 touchmove、wheel）是可捕获和冒泡的，它们常被用来触发滚动。实际发生穿透的，往往是这些底层交互事件，而非 scroll 本身。
-
wheel和touchmove默认可冒泡，且在滚动容器无法响应时，会逐级向上传播到body或document -
scroll事件只在目标元素实际滚动后触发，此时穿透已发生，拦截为时已晚 - 因此，必须在
wheel或touchmove阶段就阻断传播并禁止默认行为
推荐方案：在浮层容器上监听并阻止
给弹层最外层 DOM 元素（如 .modal）添加事件监听，使用捕获阶段提前介入，更可靠地拦截所有可能触发背景滚动的输入：
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
const modal = document.querySelector('.modal');
<p>const preventDefault = (e) => {
e.preventDefault();
};</p><p>// 捕获阶段监听，确保早于 body 的监听器执行
modal.addEventListener('touchmove', preventDefault, { passive: false, capture: true });
modal.addEventListener('wheel', preventDefault, { passive: false, capture: true });
</p>
-
passive: false是关键：否则浏览器会忽略preventDefault()（尤其在移动端） -
capture: true确保在捕获阶段就拦截，避免被父级（如 body）提前处理 - 无需手动
stopPropagation()——preventDefault()已阻止默认滚动，而事件是否冒泡不影响行为
补充策略：临时禁用 body 滚动（兼容性兜底）
当浮层打开时，给 添加 overflow: hidden，关闭时恢复。这是简单有效的辅助手段：
const body = document.body;
<p>const lockScroll = () => {
const originalOverflow = body.style.overflow;
body.dataset.originalOverflow = originalOverflow;
body.style.overflow = 'hidden';
};</p><p>const unlockScroll = () => {
body.style.overflow = body.dataset.originalOverflow || '';
delete body.dataset.originalOverflow;
};
</p>
- 注意：仅靠此法不够 —— 在 iOS Safari 中，即使
overflow: hidden，仍可能因 overscroll 弹跳导致穿透 - 应与事件监听方案配合使用，形成双重保障
- 记得在浮层关闭时及时恢复，避免影响后续页面行为
特别注意 iOS Safari 的 overscroll 行为
iOS Safari 对 touchmove 的 overscroll（超出边界时的弹性回弹）有特殊处理，即使加了 preventDefault()，若容器未设置 overscroll-behavior: contain，仍可能穿透：
.modal {
overscroll-behavior: contain; /* 关键！阻止滚动链式传递 */
}
-
overscroll-behavior: contain可让该容器完全隔离滚动行为，不触发相邻区域的滚动或刷新 - 支持现代浏览器（Chrome 63+、Firefox 59+、Safari 16.4+），iOS Safari 16.4 起支持
- 对老版本 Safari，仍需依赖
touchmove + preventDefault + capture组合
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
