滚动条仍在是因为overflow设置未生效或判定失效；需检查容器高度、子元素定位、computed样式及伪元素兼容性，并注意body闪动、iframe跨域限制和chrome scrollbar-gutter等细节。
滚动条为什么还在？先看 overflow 设置是否生效
浏览器默认会在内容溢出容器时显示滚动条，但很多人加了 overflow: hidden 还是看到滚动条——大概率是父容器没设高度、或子元素用了 position: fixed/absolute 脱离文档流，导致“溢出”判断失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给目标容器明确设置
height或max-height（仅靠min-height不够） - 检查是否有子元素设置了
position: absolute且 left/top 超出容器边界 - 用浏览器开发者工具选中容器，看 computed 样式里
overflow是否真为hidden，注意它可能被overflow-x/overflow-y单独覆盖
隐藏滚动条但保留滚动功能（比如 iOS Safari 里常用）
纯 overflow: hidden 会禁掉滚动，而很多场景需要“能滚但不显条”，这时候得靠伪元素 + 覆盖技巧。主流方案是针对 WebKit 内核（Chrome/Safari）用 ::-webkit-scrollbar，但要注意它只控制样式，不改变滚动行为。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 只隐藏 WebKit 滚动条：
.container::-webkit-scrollbar { width: 0; height: 0; } - Firefox 需额外加
scrollbar-width: none（仅支持auto/thin/none） - IE/Edge Legacy 不支持伪元素隐藏，只能用
overflow: -ms-scrollable配合 JS 模拟，基本放弃 - 移动端务必测试：iOS Safari 对
::-webkit-scrollbar支持不稳定，某些版本下即使设了width: 0仍可能闪现
全局去掉 body 滚动条后页面闪动或错位
直接给 body 加 overflow: hidden 最常见问题不是“没生效”，而是触发重排：滚动条消失后，body 宽度突然变宽（因为滚动条占位没了），导致布局右移，肉眼可见“抖一下”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
overflow: hidden同时加padding-right补上滚动条宽度（通常约17px），但更稳妥的是用 JS 动态读取document.body.offsetWidth - document.documentElement.clientWidth获取真实滚动条宽度 - 避免在动画/弹窗打开瞬间切
overflow，改用transform: translateZ(0)强制硬件加速缓解闪动 - 如果只是临时禁滚动（如模态框），优先用
position: fixed; top: calc(-1 * var(--scroll-y))锁定 body，再配合overflow: hidden，否则 iOS 上 touchmove 仍可能穿透
iframe 里的滚动条去不掉？重点查 sandbox 和跨域限制
给 iframe 设 scrolling="no" 已废弃，现代写法全靠 CSS。但即使父页面写了 iframe { overflow: hidden }，子页面仍可能撑出滚动条——尤其是子页面本身设置了 html { overflow: scroll } 或用了 body { margin: 0 } 导致内容外溢。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保 iframe 的
sandbox属性没禁掉allow-scripts，否则子页面 JS 无法响应样式变化 - 跨域 iframe 无法通过 JS 注入样式，只能靠子页面自己处理；同域可注入：
iframe.contentDocument.documentElement.style.overflow = 'hidden';
- 检查子页面是否用了
viewportmeta，width=device-width缺失会导致 iOS 下 iframe 内容被缩放，意外触发溢出
真正难的不是写那行 overflow: hidden，而是得想清楚：这个容器到底有没有“溢出”的判定依据，它的子元素是不是在偷偷撑开空间，还有那个你没注意到的 scrollbar-gutter 在 Chrome 115+ 里悄悄占位。这些细节一漏，滚动条就回来敲门。
