overflow:hidden会让弹窗滚动失效，因其销毁滚动上下文，致scrollTop为0、scrollIntoView静默失败、触控/滚轮/键盘全部失灵，且iOS可能触发橡皮筋回弹暴露原生滚动条。
为什么 overflow: hidden 会让弹窗滚动失效
很多人给弹窗蒙层加 overflow: hidden，以为只是“藏滚动条”，结果发现内容根本不能滚——这是最典型的误用。该值会直接销毁滚动上下文：scrollTop 读取为 0、scrollIntoView() 静默失败、触控板/滚轮/键盘方向键全部失灵。移动端 Safari 还可能因此意外触发橡皮筋回弹并暴露原生滚动条。
::-webkit-scrollbar { display: none } 在 iOS 上常不生效的真正原因
不是写错了选择器，而是浏览器渲染机制限制：旧版 Safari（iOS 15 及更早）和部分 Chromium 版本，在 position: absolute 或 contain: paint 容器中应用 ::-webkit-scrollbar { display: none } 时，会连带抑制滚动区域响应。必须同时满足三个条件才可靠：
- 目标元素显式设置了
overflow-y: auto或overflow-y: scroll - 内容真实溢出（不能靠
height: 100vh或flex: 1模拟） -
::-webkit-scrollbar规则与overflow声明在同一 CSS 计算链上（不能拆在不同文件或内联样式里）
更稳妥的写法是：.modal-body::-webkit-scrollbar { width: 0; height: 0; background: transparent; }
Firefox 和 IE/Edge 的隐藏规则必须配对生效
scrollbar-width: none 在 Firefox 中只对 64+ 生效，且仅作用于块级容器（<div>、<code><section></section>），写在 html 或 body 上会被忽略。它还必须搭配 scrollbar-color: transparent transparent，否则某些版本仍残留轨道色块。-ms-overflow-style: none 是 IE10+/旧 Edge 唯一有效方式，但注意它不支持 display: none，只能设为 none。
立即学习“前端免费学习笔记（深入）”；
三者缺一不可，且顺序无关紧要：
.modal-body {
overflow-y: auto;
scrollbar-width: none;
scrollbar-color: transparent transparent;
-ms-overflow-style: none;
}
.modal-body::-webkit-scrollbar {
width: 0;
height: 0;
background: transparent;
}
弹窗场景下滚动穿透比滚动条更难防
即使滚动条“隐形”了，用户在弹窗内滑到顶/底继续拖拽，底层页面仍可能跟着动——这不是滚动条问题，是滚动链未切断。仅靠 CSS 隐藏滚动条完全无效。必须：
- 给弹窗内部可滚动区域（如
.modal-body）加overscroll-behavior: contain - 同时用 JS 锁定
document.body位置：document.body.style.position = 'fixed'; document.body.style.top = `-${window.scrollY}px` - 关闭弹窗时恢复：
document.body.style.position = '';并window.scrollTo(0, scrollY)
老 iOS（overscroll-behavior，JS 锁定位置也防不住键盘唤起导致的位移——这种情况下，应避免依赖强滚动边界交互，改用分页或折叠展开等替代方案。
