真正需求是弹出层独立滚动且背景页不响应滚动但可恢复：应动态锁定body滚动并保存原始overflow和scrolltop值，关闭时精准还原，而非简单设overflow:hidden。
弹出层打开时 body 滚动条消失但页面仍可滚动？别这么想
直接给 body 加 overflow: hidden 确实能让滚动条“消失”，但这是假消失——它同时禁用了所有滚动行为，包括滚轮、触摸拖动、scrollTo 调用。用户一滑就卡住，不是“隐藏滚动条”，是“锁死页面”。真正需求其实是：弹出层能独立滚动，背景页不响应滚动事件，但关闭后一切恢复如常。
微信/移动端弹出层滚动时透传到 body 的根本原因
这不是 bug，是浏览器默认行为：当一个可滚动元素（比如弹出层）滚到顶或底时，会触发“滚动穿透”（scroll chaining），把事件交给父级可滚动容器（即 body）。iOS Safari 和微信内置浏览器尤其明显。
- 仅靠
event.preventDefault()在弹出层上监听touchmove往往无效——因为 touch 事件可能没冒泡到你绑定的节点，或被原生滚动逻辑劫持 - 用
pointer-events: none禁用body不可行——它会让整个页面失焦，输入框无法聚焦、按钮点不了 - 设置
html, body { height: 100%; overflow: hidden; }会导致页面重排抖动（滚动条占位消失 → width 突增 → 布局右移）
推荐做法：动态锁定 body 滚动 + 保存原始状态
核心思路不是“隐藏滚动条”，而是“临时冻结 body 的滚动能力，同时保留其 scrollTop 和原有 overflow 值，以便精准还原”。
- 打开弹出层前，先缓存
document.body.style.overflow和document.body.scrollTop - 执行
document.body.style.overflow = 'hidden'—— 注意是内联样式，优先级高，避免被 CSS 类覆盖 - 同时记录当前
window.pageYOffset，并在关闭时用window.scrollTo(0, savedY)恢复位置（仅当用户没手动滚动过） - 关闭弹出层时，**不要**直接设为
'auto'或'visible'，而应回写原始值；若原始值为空，则用getComputedStyle(document.body).overflow获取并还原 - 如果弹出层自身需要滚动，确保其 CSS 含
overflow-y: auto且有明确高度（如max-height: 80vh），否则内部内容不会触发滚动
微信里特别要防的坑：iOS Safari 的 overscroll bounce
即使 body 锁住了，iOS 微信下拉仍可能触发“橡皮筋回弹”，松手瞬间 body 又滚一下。这不是 JS 能拦截的底层行为，得靠 CSS 配合：
- 给
body加overscroll-behavior: contain（现代浏览器支持，微信 8.0.30+ 已兼容） - 若需兼容旧版微信，可在弹出层打开时额外加一条：
document.body.style.position = 'fixed'; document.body.style.top = `-${window.pageYOffset}px`;，关闭时再还原 position 并scrollTo(0, savedY) - 注意：
position: fixed会脱离文档流，若页面有 sticky 元素或 transform 动画，可能引发渲染异常，务必测试
最麻烦的不是怎么锁，是怎么解锁——嵌套弹窗、快速开关、SPA 路由跳转时，容易漏掉还原逻辑或覆盖错值。建议把锁定/解锁封装成函数，每次调用都打日志，上线前用真机反复开关十次以上测还原是否干净。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
