遮罩层中仅用stopPropagation()无法阻止底层滚动，因scroll事件不冒泡；正确做法是显示时设置body overflow:hidden并配合wheel/touchmove事件preventDefault()，同时注意iOS兼容性。
在自定义遮罩层（如弹窗、抽屉、全屏蒙层）中，仅靠 stopPropagation() 无法阻止底层页面滚动，因为滚动事件（scroll）本身**不冒泡**，且通常由用户直接触发在可滚动容器（如 body 或某个 div）上，而非通过点击/触摸“穿透”而来。
遮罩层内阻止滚动的关键不是 stopPropagation
你调用 e.stopPropagation() 是针对 click、touchstart 等冒泡事件有效，但滚动行为由以下机制驱动：
- 鼠标滚轮（
wheel）事件默认会冒泡，但阻止它需显式e.preventDefault()，且必须在监听的元素上触发（比如遮罩层本身）； - 触摸拖拽滚动（iOS/Android）本质是原生滚动行为，不经过常规事件流，
stopPropagation完全无效； - 键盘方向键或空格键触发的滚动，属于
keydown事件，也需单独拦截。
正确做法：禁用 body 滚动 + 遮罩层局部滚动（推荐）
最稳定通用的方案是：遮罩层显示时，给 <body> 添加 overflow: hidden，同时确保遮罩层内部内容可滚动（如有需要）：
- 显示遮罩层时：
document.body.style.overflow = 'hidden'; - 隐藏遮罩层时：
document.body.style.overflow = '';（或恢复原有值） - 若遮罩层内有长内容需滚动，给遮罩层容器设置
max-height: 100vh; overflow-y: auto;
注意：iOS Safari 中 body 设置 overflow: hidden 可能失效，建议同时加 position: fixed; width: 100%; height: 100%; 到 body 或一个顶层 wrapper 上，更可靠。
立即学习“Java免费学习笔记（深入）”；
补充拦截：wheel 和 touchmove 事件
为增强兼容性（尤其防止鼠标滚轮误触底层），可在遮罩层元素上监听并阻止：
maskEl.addEventListener('wheel', e => e.preventDefault(), { passive: false });maskEl.addEventListener('touchmove', e => e.preventDefault(), { passive: false });
⚠️ 注意：{ passive: false } 必须显式声明，否则 preventDefault() 在现代浏览器中会被忽略（尤其移动端）。
避免常见坑：不要只依赖事件监听
以下做法通常无效或不可靠：
- 只在遮罩层上监听
click并调用stopPropagation()—— 对滚动完全无影响； - 监听
document的scroll事件再preventDefault()——scroll事件不能被取消； - 用
pointer-events: none覆盖遮罩层 —— 会同时禁用所有交互，失去点击/滚动控制能力。
不复杂但容易忽略：滚动控制的核心是 CSS 层级与行为隔离，而非事件流拦截。
