overflow:hidden写在body上会彻底禁用页面滚动，剪裁溢出内容且禁止滚轮、触摸拖动及js scrollto；它不是仅隐藏滚动条，而是关闭滚动功能本身，常见于弹窗遮罩等场景，误用将导致底部内容不可访问。
overflow:hidden 直接写在 body 或 html 上会导致滚动条消失
很多开发者为了“清除默认滚动”或“隐藏页面整体滚动”，直接在 body 或 html 上加了 overflow: hidden，结果整个页面不能滚动了。这不是 bug，是预期行为——overflow: hidden 会同时禁用滚动功能和隐藏滚动条。
常见错误写法：
body {
overflow: hidden;
}
- 即使内容高度远超视口，页面也完全无法上下滚动
- 移动端 Safari 下还可能触发“滚动卡死”或手势失效
- 后续 JS 调用
scrollTo()或监听scroll事件也会静默失败
用 overflow:auto 替代 overflow:hidden 控制滚动行为
想让容器可滚动但又不强制显示滚动条（比如只在需要时出现），应该用 overflow: auto，而不是 hidden。它只在内容真正溢出时才启用滚动机制。
典型适用场景：
- 主内容区需支持滚动，但不希望常驻滚动条干扰视觉
- 弹窗/抽屉等组件内部内容可能超长，需按需滚动
- 避免因误设
hidden导致整个页面“锁死”
注意：仅设 overflow: auto 不够，父容器必须有明确高度约束（如 max-height: 600px 或 height: 100vh），否则浏览器无法判断是否溢出。
自定义滚动条样式时，webkit 和 Firefox 的写法必须都覆盖
滚动条“消失”常不是真没了，而是被 CSS 隐藏了。比如你写了 ::-webkit-scrollbar { width: 0 }，这在 Chrome / Safari 下确实隐藏了滚动条，但在 Firefox 下完全无效——它根本不识别这个伪元素。
Firefox 需要单独处理：
/* WebKit 内核 */
::-webkit-scrollbar {
width: 0;
}
<p>/<em> Firefox </em>/</p>
- {
scrollbar-width: none;
}
-
scrollbar-width: none必须写在全局选择器（如*或html）上才生效 - 若只写在某个 class 上，对子元素无效
- 两者缺一不可，否则会出现“Chrome 没滚动条、Firefox 还有”的不一致
-
WordPress 或框架主题里滚动条消失，大概率是 CSS 优先级覆盖了 overflow
特别是 WordPress 主题或 Element UI、Ant Design 等框架，它们的 CSS 文件常带高权重选择器，比如：
.wp-site-blocks .entry-content {
overflow: hidden !important;
}
这类规则会直接干掉你写的 overflow: auto。排查要点：
- 打开 DevTools，选中目标容器，在 Styles 面板里看
overflow是否被 strike-through（划掉） - 检查是否有
!important或更具体的选择器（如div#main > section > .content）覆盖了你的规则 - 临时加
!important测试是否恢复滚动（仅用于验证，上线前应改选择器精度） - 避免用
body { overflow: auto !important }全局强刷，容易破坏固定定位元素（如position: fixed导航栏）的交互逻辑
最稳妥的方式是找到冲突来源，用更精确的选择器重置，比如：.my-main-container { overflow: auto !important; max-height: calc(100vh - 80px); }。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
