overflow:hidden失效主因是容器未真正溢出：父容器缺height/max-height、子元素脱离文档流（absolute/fixed）、overflow-x/y被单独覆盖，或伪元素/兼容性设置不当；需用computed检查并针对性修复。
overflow: hidden 为什么没用？先查容器是否“真溢出”
加了 overflow: hidden 还看到滚动条，大概率不是 CSS 写错了，而是浏览器根本没判定为“溢出”。常见原因有：
- 父容器没设
height或max-height（仅min-height不够） - 子元素用了
position: absolute或fixed，脱离文档流后，超出部分不参与溢出计算 -
overflow-x和overflow-y单独设置了，覆盖了overflow的全局值 - 用开发者工具选中元素，看 computed 样式里
overflow是否确实是hidden，注意它可能被更具体的规则（比如来自 reset.css）覆盖
::-webkit-scrollbar 在 Chrome/Safari 里失效的几种情况
WebKit 内核下写 ::-webkit-scrollbar { width: 0 } 看似简单，但容易踩坑：
- iOS Safari 某些版本（如 iOS 16.4+）即使设了
width: 0，快速拖动时仍会闪现滚动条 - 如果容器同时设置了
overscroll-behavior-x: contain，部分 Safari 版本会忽略伪元素隐藏逻辑 - 伪元素只控制样式，不影响可访问性：键盘
Tab仍能聚焦到滚动区域，屏幕阅读器可能误报“可滚动” - 必须确保选择器精确匹配容器——写成
body::-webkit-scrollbar不生效，得用html::-webkit-scrollbar或具体类名容器
Firefox 和旧版 Edge 怎么统一处理？别漏掉 -ms-overflow-style
Firefox 只认 scrollbar-width: none，IE/Edge Legacy（EdgeHTML）只吃 -ms-overflow-style: none，三者缺一不可：
-
scrollbar-width只支持auto/thin/none，不能设像素值；设成none后，滚动功能保留，只是不显示 -
-ms-overflow-style: none在 Chromium 内核新版 Edge（Blink）已废弃，但对仍在用 IE11 或旧 Edge 的政企系统仍是刚需 - 这三个声明必须写在同一选择器下，分开写容易被后续规则覆盖，推荐这样写：
.scrollable-area {
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.scrollable-area::-webkit-scrollbar {
display: none;
}
真正稳定的方案：scrollbar-gutter: stable + fallback
2026 年最靠谱的解法不是“藏滚动条”，而是让滚动条“有空间但不出现”——scrollbar-gutter: stable 就是干这事的：
- 必须写在
html元素上，写在body或任意div都无效 - 必须搭配
overflow-y: auto（不能是hidden或scroll），否则 gutter 不触发 - 不支持该属性的老浏览器（如 Chrome 93 以下、Safari 16.3 以下）会自动忽略，此时需 fallback：
html { overflow-y: scroll; }——看起来保守，但能彻底避免页面因滚动条消失导致的宽度跳动 - 别手算 17px 去减宽：滚动条宽度随系统主题、DPI、macOS vs Windows 动态变化，
scrollbar-gutter是唯一免维护的方案
复杂点在于：它解决的是布局稳定性问题，不是视觉美化问题。很多人卡在“怎么让滚动条看不见”，其实该问的是“怎么让内容不因滚动条出现/消失而重排”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
