iframe自身无法直接美化滚动条，因其滚动条属于内部文档渲染结果；仅同源时可通过JS注入样式或在源文件中用::-webkit-scrollbar等CSS规则定制，跨域则完全不可控。
iframe 本身不能直接美化滚动条
你没法用 ::-webkit-scrollbar 或 scrollbar-width 直接控制 iframe 元素自身的滚动条样式——因为 iframe 的滚动条属于其内部文档（即 src 指向的页面）的渲染结果，不是父页面的 DOM 可控范围。
这意味着：如果你嵌入的是第三方页面（比如 src="https://example.com"），且不同源，那根本无法修改它的滚动条样式，同源策略会阻止你访问其 document 和样式表。
- 只有当 iframe 内容与父页面同源（协议+域名+端口完全一致），你才能通过 JS 注入样式或操作其
contentDocument - 即使同源，也要等 iframe 加载完成（
load事件）后再操作，否则contentDocument为null -
scrolling属性（如scrolling="no"）是 HTML4 遗留属性，HTML5 已废弃，应改用 CSS 的overflow控制
同源 iframe 内部滚动条美化写法
假设你控制着 iframe 的源文件（比如本地 ./inner.html），最稳妥的方式是在那个页面里写 CSS，而不是在父页折腾。
在 inner.html 的 <head> 中加入：
立即学习“前端免费学习笔记（深入）”；
.container {
overflow-y: auto;
}
.container::-webkit-scrollbar {
width: 8px;
}
.container::-webkit-scrollbar-track {
background: #f1f1f1;
}
.container::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
.container::-webkit-scrollbar-thumb:hover {
background: #555;
}
/* Firefox */
.container {
scrollbar-width: thin;
scrollbar-color: #888 #f1f1f1;
}
注意：.container 是你实际内容的包裹容器（比如 <div class="container">...</div>），不是 <iframe> 标签本身。iframe 只负责承载，滚动行为和样式由内部文档决定。
- 不要给
<body>直接加::-webkit-scrollbar，某些浏览器（如 Safari）对 body 的伪元素支持不稳定 - Firefox 的
scrollbar-width: thin不是像素值，仅接受auto/thin/none - 若想隐藏滚动条但保留滚动能力，用
scrollbar-width: none+::-webkit-scrollbar { display: none }即可
父页面强行干预同源 iframe 滚动条（不推荐但可行）
如果你不能修改 src 页面，但它是同源的，可以用 JS 在父页注入样式。前提是 iframe 已加载完成：
const iframe = document.getElementById('myIframe');
iframe.addEventListener('load', () => {
const doc = iframe.contentDocument || iframe.contentWindow?.document;
if (!doc) return;
<p>const style = doc.createElement('style');
style.textContent = <code> .scrollable-area { overflow-y: auto; } .scrollable-area::-webkit-scrollbar { width: 6px; } .scrollable-area::-webkit-scrollbar-thumb { background: #007bff; } .scrollable-area { scrollbar-color: #007bff #eee; } </code>;
doc.head.appendChild(style);</p><p>// 再把 class 加到目标容器上（需知道内部结构）
const target = doc.querySelector('.main-content') || doc.body;
target.classList.add('scrollable-area');
});
这个做法脆弱：一旦 iframe 内部 DOM 结构变化、或使用 Shadow DOM，就容易失效。而且每次 iframe 重载都要重新注入。
- 别尝试用
iframe.style.overflow = 'hidden'——这只会裁剪内容，不是美化滚动条 -
iframe.scrolling = 'no'是过时写法，且在现代浏览器中可能被忽略 - 如果 iframe 内容是单页应用（如 React/Vue），动态插入的容器可能没及时挂载，需配合 MutationObserver
非同源 iframe 的唯一可控点：iframe 自身的 overflow
对于嵌入 src="https://twitter.com" 这类跨域页面，你唯一能控制的，是 iframe 元素本身的溢出行为：
<iframe src="https://twitter.com" width="600" height="400" style="border: none; overflow: hidden;" sandbox="allow-scripts allow-same-origin" ></iframe>
这里 overflow: hidden 是作用于 iframe 这个替换元素盒子的，它会让 iframe 超出自身宽高的部分被裁剪，**不会影响内部页面的滚动条显示与否**——内部页面该显示滚动条还是显示。
- 想“隐藏”滚动条？做不到。用户仍能看到并拖动内部页面的滚动条
- 想“禁用”滚动？可以加
sandbox="allow-scripts"并移除allow-same-origin，但很多网站会因此白屏或报错 - 真正实用的妥协方案：设足够大的
height，配合loading="lazy"和referrerpolicy="no-referrer"提升加载体验
父页面对 iframe 滚动条的控制权极其有限，真正的样式定制必须落在 iframe 内容页自身。最容易被忽略的点是：很多人花几小时调试父页 CSS，却没意识到问题根本不在那儿——得去改那个 src 指向的 HTML 文件。
