body { overflow: hidden } 常失效，因滚动容器常为 html 或内部元素；需同时设置 html, body { overflow: hidden; height: 100% }，移动端可加 body { position: fixed } 或 touchmove.preventDefault() 配合。
body { overflow: hidden } 为什么有时没用
直接给 body 加 overflow: hidden 在多数浏览器里确实能禁掉滚动，但实际常失效——根本原因是滚动容器不一定是 body，现代页面滚动往往发生在 html 元素或某个内部容器上。
- Chrome/Firefox 默认把根滚动交给
html，body只是内容容器；设body { overflow: hidden }对根滚动无效 - 移动端 Safari 更敏感：即使
html和body都设了overflow: hidden，仍可能因 viewport 缩放、键盘弹出触发回弹滚动 - 某些框架（如 React Router + 滚动锚点）会动态操作
scrollTo或修改scrollTop，CSS 锁不住 JS 主动滚动
真正生效的 CSS 组合写法
要覆盖主流场景，必须同时控制 html 和 body，并处理移动端特殊行为：
- 必须写
html, body { overflow: hidden; height: 100%; }—— 单独设body不够，height: 100%是为了防止html内容撑高后产生隐式滚动 - 移动端加
body { position: fixed; top: 0; left: 0; width: 100%; }能绕过 Safari 的弹性滚动（但会丢失原有定位流，慎用） - 如果页面有
transform或will-change层叠上下文，可能干扰overflow生效，需检查父级是否意外创建了新的滚动上下文
简短示例：
html, body {
overflow: hidden;
height: 100%;
}
/* 移动端兜底 */
@media (max-width: 768px) {
body {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
}JS 配合时的常见翻车点
纯 CSS 不足以应对所有交互场景，比如模态框打开时禁滚动、关闭后恢复。此时 JS 必须同步处理，否则会出现“视觉锁住但滚轮/触摸板仍可拖动”的现象：
立即学习“前端免费学习笔记（深入）”；
- 不要只改
style.overflow，记得保存原始值：const prevOverflow = document.body.style.overflow;，否则多次开关后容易漏恢复 - 移动端 iOS Safari 中，
touchmove事件默认可滚动，即使overflow: hidden也拦不住手指滑动，必须加event.preventDefault()（且要在touchstart就绑定，延迟绑定无效） - 使用
document.body.scrollTop = 0或window.scrollTo(0, 0)清除已有滚动位置，否则恢复时可能卡在中间
overflow: hidden 的副作用你得知道
它不只是“不让滚”，还会改变渲染行为和交互预期：
- 设了
overflow: hidden的元素，其子元素的position: fixed会相对于该元素定位，而非视口——这意味着弹窗、Tooltip 可能错位 - 部分屏幕阅读器（如 VoiceOver）依赖滚动位置做焦点管理，强行锁死可能导致键盘导航异常
- 性能上一般无负担，但若配合大量
transform动画，某些旧版 Android WebView 会出现闪烁或重绘异常
真正麻烦的从来不是怎么加 overflow: hidden，而是什么时候该删、删不干净会怎样、以及用户手指已经划出去了你才想起来阻止 —— 这些细节不试三次真不知道。
