iframe滚动条美化必须作用于其内部文档，不能通过父页样式控制；需将::-webkit-scrollbar等规则写入iframe源文件或动态注入，且仅对设置了overflow:auto/scroll并实际溢出的容器生效。
iframe滚动条美化必须作用于内部文档，不能直接写在父页
你无法通过父页面的 ::-webkit-scrollbar 控制 iframe 里内容的滚动条——浏览器把 iframe 当作独立文档上下文，样式不穿透。想美化它，得把自定义 CSS 放进 iframe 指向的 HTML 文件里（比如 content.html），或者用 JS 动态注入到 iframe 的 document 中。
常见错误是把滚动条样式写在父页 body 或全局选择器下，结果完全没反应。这不是语法错，是作用域错。
- 如果 iframe 是同源的（比如都属
example.com），可用 JS 获取其contentDocument并插入 style 标签 - 如果跨域，只能靠服务端控制 iframe 源文件，或改用其他交互方案（如固定高度 + 内部容器滚动）
- 别给
iframe元素本身写::-webkit-scrollbar—— 它不是可滚动容器，只是个嵌入框
iframe 内部滚动条必须绑定到实际溢出容器上
即使进了 iframe 文档，::-webkit-scrollbar 也不会自动生效。它只对设置了 overflow: auto 或 scroll 且内容真正溢出的块级元素起作用。常见陷阱是直接写 html::-webkit-scrollbar 或 body::-webkit-scrollbar，但多数情况下 body 没设固定高、没触发滚动，样式就被忽略。
- 推荐做法：用一个包裹 div，比如
.scroll-wrapper，设height: 100vh; overflow-y: auto; - 然后所有伪元素都挂在这上面：
.scroll-wrapper::-webkit-scrollbar、.scroll-wrapper::-webkit-scrollbar-thumb等 -
overflow: overlay已废弃，别用；overscroll-behavior: contain在 Safari 上可能干扰手势，要实测
Firefox 和 Safari 对 iframe 滚动条支持更弱
Firefox 完全无视 ::-webkit-scrollbar，哪怕在 iframe 内部也一样。它只认 scrollbar-width 和 scrollbar-color，但这两个属性只对根滚动容器（即 iframe 文档的 html 或设置了 overflow 的顶层块）有效，对嵌套 div 无效。
- 要在 Firefox 中生效，必须确保 iframe 的
html或body有overflow-y: scroll，再配html { scrollbar-width: thin; scrollbar-color: #6c5ce7 #f0f0f0; } - Safari（尤其 iOS）对
border-radius有限制：若::-webkit-scrollbar-thumb高度为 6px，border-radius超过 3px 就会失效 - 移动端通常强制使用系统滚动条，圆角/阴影等修饰大概率被忽略，别强求视觉一致
横向滚动条美化需显式设 height，且注意 flex 布局干扰
iframe 里做横向滚动（比如图片画廊）时，::-webkit-scrollbar 默认只管竖向，横向滚动条要用 height 控制，不是 width。而且如果用了 display: flex 布局，容易因子项未设 flex-shrink: 0 导致宽度计算异常，滚动不触发。
- 横向滚动容器必须设
overflow-x: auto，并确保子内容总宽度 > 容器宽度 - 横向滚动条样式：
::-webkit-scrollbar { height: 8px; }，::-webkit-scrollbar-thumb { background: #6c5ce7; border-radius: 4px; } - 子项加
flex-shrink: 0防止被压缩，必要时用white-space: nowrap配合inline-block替代 flex
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
