overflow: hidden 未隐藏滚动条主因是浏览器未识别溢出，常见于容器无 height/max-height、子元素脱离文档流或 overflow-x/y 覆盖全局设置；隐藏滚动条需结合伪元素与专有属性，非单纯 overflow: hidden。
overflow: hidden 为什么没藏住滚动条
加了 overflow: hidden 却还看到滚动条，大概率不是样式写错了，而是“溢出”根本没被浏览器识别到。常见原因有三个：
• 容器没设 height 或 max-height（仅 min-height 不触发溢出判定）
• 子元素用了 position: absolute 或 position: fixed，脱离文档流后，其尺寸不参与父容器溢出计算
• overflow-x 和 overflow-y 单独设置了值，覆盖了 overflow: hidden 的全局效果
用开发者工具选中该容器，看 computed 样式里 overflow 是否真为 hidden，特别注意 overflow-x 和 overflow-y 是否显示为 visible 或 auto
隐藏滚动条但保留滚动功能的跨浏览器写法
要“能滚、不见条”，不能只靠 overflow: hidden——它会直接禁掉滚动。得组合伪元素和专有属性：
• WebKit（Chrome/Safari）：必须用 ::-webkit-scrollbar，设 width: 0 或 display: none
• Firefox：加 scrollbar-width: none（仅支持 auto/thin/none）
• IE/Edge Legacy：-ms-overflow-style: none 仅部分生效，实际建议放弃兼容
注意：scrollbar-width: none 在 Firefox 100+ 才稳定；iOS Safari 对 ::-webkit-scrollbar 支持极差，某些版本下即使设了 width: 0 仍会闪现滚动条，此时需配合 padding-right: 15px + 外层 overflow: hidden 的偏移遮盖法
局部滚动容器（如表格、弹窗）隐藏滚动条的实操要点
给 <table> 或弹窗内区域加滚动时，最容易踩的坑是滚动链断裂或父级干扰：
• 表格滚动：必须把 overflow-y: auto 加在包裹 <table> 的 <div> 上，而不是 <table> 自身（<table> 不支持 overflow）
• 弹窗场景：打开弹窗时设 document.body.style.overflow = 'hidden'，但要同步给弹窗容器加 max-height: 80vh 和 overflow-y: auto，否则内容可能撑爆视口
• 避免 body 宽度突变：直接对 body 设 overflow: hidden 会导致滚动条占位消失、页面向右“抖一下”，更稳妥的是用 document.body.style.paddingRight = '15px' 补回宽度
移动端横向滚动条顽固不消失？先查这三处
移动端页面底部总有一条横向滚动条，90% 是因为某个元素悄悄撑宽了 body：
• 图片或视频没设 max-width: 100%，尤其带 width: 100vw 的全宽图，在有滚动条的设备上会多出约 15px
• margin 或 padding 没重置，比如 body 默认有 margin: 8px，叠加后超宽
• 绝对定位元素 left/right 值过大，或用了 transform: translateX() 移出边界但未被裁剪
临时诊断可用控制台执行：* { outline: 1px solid red !important; }，立刻暴露所有溢出边缘；修复时优先用 overflow-x: hidden 锁死 body，再逐个排查子元素宽度来源
立即学习“前端免费学习笔记（深入）”；
