iframe滚动条美化需由同源子页面CSS控制，父页无法穿透样式；跨域时完全不可控，仅能通过约束容器尺寸、隐藏自身滚动条等方式间接优化。
iframe 本身不能直接美化滚动条——滚动条样式由 iframe 内部页面的 CSS 控制，而非父页面。你只能影响它显示与否、尺寸是否合理，或在同源前提下注入样式。
iframe 内部页面必须自己写 ::-webkit-scrollbar
滚动条美化是渲染层行为，只对当前文档生效。即使你在父页面写了 ::-webkit-scrollbar 规则，它也不会穿透到 iframe 的 document 中。只有当 iframe 加载的是同源 HTML（比如 src="/embed/content.html"），你才能在那个 HTML 文件里写：
/* 嵌入页内部的 CSS */
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: #a0a0a0;
}- Firefox 需额外加
scrollbar-width: thin; scrollbar-color: #a0a0a0 #f1f1f1;到同源嵌入页的:root或body - IE 完全不支持，不用考虑
- 如果 iframe 是跨域的（如
src="https://example.com"），你连它的 DOM 都读不到，更别说改样式了
父页面能做的有限但关键：控制 iframe 容器的溢出与尺寸
滚动条“变细”的视觉效果，往往不是靠美化，而是靠避免双滚动条 + 精确控制容器高度。常见错误是父容器没设高，导致 iframe 自身溢出并触发浏览器默认粗滚动条。
- 确保 iframe 外层有明确高度约束：
height: 500px或max-height: 80vh，不能只靠height: 100%且祖先无高 - 禁用 iframe 自身滚动条：
<iframe style="overflow: hidden;">—— 注意这是作用于 iframe 元素自身（比如它内容超宽时横向滚动），不是内部页面的滚动条 - 若想隐藏父容器滚动条但保留可滚动性，可用
overflow: overlay（仅 Safari 支持）或退而求其次用overflow: auto+::-webkit-scrollbar { width: 0 }隐藏轨道（仅 WebKit）
跨域 iframe 滚动条无法美化，只能降级处理
对于 src="https://thirdparty.com" 这类跨域 iframe，你没有任何样式控制权。此时“变细”唯一可行路径是让内部页面自己适配，或协商对方加样式。你这边能做的只有：
立即学习“前端免费学习笔记（深入）”；
- 用
scrolling="no"（已废弃但仍有效）或style="overflow: hidden"强制隐藏 iframe 边框和自身滚动条 - 配合
sandbox="allow-scripts"等权限控制，但不解决样式问题 - 如果对方支持，请求其在页面中加入
scrollbar-width: thin和 WebKit 规则——这是唯一正解 - 不要尝试用
pointer-events: none来“掩盖”滚动条，这会让整个 iframe 不可交互
真正容易被忽略的点是：滚动条宽度感知依赖渲染上下文。哪怕你把所有 CSS 都写对了，只要 iframe 的 height 是由 JS 动态计算而来且时机不对（比如在 load 事件前就读取 document.body.scrollHeight），就可能造成布局抖动、滚动条忽隐忽现、或浏览器 fallback 到默认粗样式。务必在 iframe load 后再做尺寸同步，并用 getBoundingClientRect() 替代单纯 height 计算。
