overflow:hidden写在body或html上会彻底禁用滚动功能，不仅隐藏滚动条，还使滚轮、触摸拖动及scrollTo()全部失效；它会重置overflow-y为visible，且与fixed定位叠加易导致内容不可见不可滚。
body 或 html 上写了 overflow: hidden 就会彻底锁死滚动
这不是 bug，是 CSS 规范的明确行为：overflow: hidden 不仅隐藏滚动条，还直接禁用整个滚动机制——滚轮、触摸拖动、scrollTo() 调用全部失效。很多项目引入第三方 CSS（比如重置样式表、UI 组件库或弹窗组件）时，会悄悄在 body 或 html 上注入这条规则。
- 检查浏览器开发者工具的“Computed”面板，搜索
overflow，看body或html是否被覆盖为hidden - 特别注意带
!important的声明，它可能来自第三方 CSS 文件末尾的强制重置 - 移动端 Safari 下，这种写法还容易触发手势完全无响应，连下拉刷新都失灵
overflow-x: hidden 也会干掉垂直滚动
很多人以为 overflow-x: hidden 只影响横向，其实它会把 overflow-y 重置为 visible（除非显式设置）。但更关键的是：当父容器（如 body）设置了 overflow-x: hidden，而子容器又没设 height 或 max-height，浏览器就无法建立滚动上下文，导致整个页面“看起来有内容却滚不动”。
- 错误写法：
body { overflow-x: hidden; }→ 垂直滚动可能意外失效 - 正确写法：
body { overflow-y: auto; overflow-x: hidden; }，且确保html和body没被设成height: 100%这类刚性高度 - 如果用了
min-height: 100vh，必须配overflow-y: auto，否则溢出内容会被裁剪而非滚动
fixed 元素遮挡 + overflow: hidden 是双重陷阱
当页面顶部有 position: fixed 的导航栏，同时 body 又被设了 overflow: hidden，问题会叠加：fixed 元素脱离文档流，不参与高度计算；hidden 又让 body 失去滚动能力；结果就是内容被压在 fixed 层下方，既看不到也滚不了。
- 快速验证：临时删掉所有
position: fixed元素，再试滚动 —— 如果恢复，说明是定位与 overflow 冲突 - 修复思路：要么移除
body的overflow: hidden，要么把可滚动区域移到 fixed 元素下方的容器内（如.main-content { overflow-y: auto; height: calc(100vh - 64px); }） - 慎用
pointer-events: none来“透传”滚动事件，它会让 fixed 元素上的按钮、链接全部失效
自定义滚动条样式后滚动条“消失”，其实是被隐藏了
写了 ::-webkit-scrollbar { width: 0 }，Chrome/Safari 看不到滚动条，但 Firefox 完全无视这条规则——它根本不会渲染伪元素，也不会因此禁用滚动功能。所以你看到的“不能滚动”，大概率是别的原因，只是误判为滚动条问题。
立即学习“前端免费学习笔记（深入）”；
- Firefox 需要单独处理：
scrollbar-width: none;（隐藏）或scrollbar-width: thin;（细条） - 如果用了
overflow: auto却没滚动，先关掉所有自定义滚动条代码，纯 CSS 排查 - 更隐蔽的问题：
overflow: auto必须配合明确的高度约束（如max-height: 400px），否则浏览器认为“没溢出”，自然不激活滚动
滚动失效最常卡在「谁该负责滚动」这个判断上。body 被锁、fixed 元素占位、高度没算对、方向属性互相覆盖——这些不是孤立问题，而是链式失效。调试时别只盯着一个元素，从 html 开始逐层往下看 overflow 计算结果，比猜更可靠。
