如何在 iframe 上设置滚动条的样式？答案

【问题标题】：how to style the scrollbar of on iframe?如何在 iframe 上设置滚动条的样式？
【发布时间】：2010-02-17 12:45:45
【问题描述】：

是否可以更改 iframe 上滚动条的样式？

我尝试使用以下代码对其进行样式设置，但它似乎不起作用

html{scrollbar-arrow-color: #252604;
 scrollbar-highlight-color: #BFC097;
 scrollbar-shadow-color: #ffffff;
 scrollbar-base-color : #000000;
 scrollbar-track-color: #E2E1D4;
 scrollbar-face-color: #BFC097;
 scrollbar-3dlight-color: #EFEEEE;
 scrollbar-darkshadow-color: #999999;}

尝试过

body{scrollbar-arrow-color: #252604;
 scrollbar-highlight-color: #BFC097;
 scrollbar-shadow-color: #ffffff;
 scrollbar-base-color : #000000;
 scrollbar-track-color: #E2E1D4;
 scrollbar-face-color: #BFC097;
 scrollbar-3dlight-color: #EFEEEE;
 scrollbar-darkshadow-color: #999999;}

我记错了吗？ iframe中的文件在不同的域中还有一件事？我有过 javascript 不起作用的经历，但它也会影响 CSS 吗？？

【问题讨论】：

我只需要在 IE 中工作，我认为上面的代码可以在 IE 中工作，但除非我做错了，否则它没有......

标签： css iframe

【解决方案1】：

没有跨浏览器的方式来设置滚动条的样式。

您拥有的代码仅适用于 Internet Explorer，并且仅适用于 quirks（非标准）模式。

您在 iframe 中拥有的内容与主页面隔离，您必须在滚动条出现的页面上设置样式，即在您在 iframe 中加载的页面中。您应用于主页的任何样式都不会影响 iframe 中的内容。

如果您无法更改在 iframe 中加载的页面内容，则无法设置滚动条的样式。

【讨论】：

他可以用Javascript将代码注入到iframe页面中？？！！ api.jquery.com/appendTo & api.jquery.com/prependTo 这只是一个有根据的猜测——我从未尝试过。
@Jonny：如果页面来自同一个域，那是可能的。
是的，我认为会是这样，我不太确定跨域问题..但感谢您指出这一点。
但是，可以使用 JavaScript 为滚动条添加样式IS（请参阅我的回答）
@Raveren：是的，你可以替换滚动条，但是当页面从不同的域加载并且你不能改变页面时不能使用。

【解决方案2】：

试试iframe body，而不仅仅是身体。

This 将在 Webkit 浏览器（Safari 和 Chrome）中完美运行，不要认为会有跨浏览器解决方案。好吧 - 你可以用Javascript！

【讨论】：

那些 webkit 滚动条很酷。 PS，它们也可以在 Chrome 中使用！
是的 - 我的意思是把 Webkit - Edited

【解决方案3】：

恐怕使用 javascript（即jScrollPane）是设置滚动条样式的唯一跨浏览器选项。

【讨论】：

【解决方案4】：

AFAIK，您不能以跨浏览器的方式执行此操作。我认为您上面使用的代码只能在 IE 中运行。

【讨论】：

【解决方案5】：

您需要将 CSS 添加到 iframe 中的实际页面，即如果您有 page.html 和 iframe.html，则 CSS 必须在 iframe.html 中。

但是，不要依赖那个 CSS，它只适用于 IE，或者 Opera 的 quirks 模式。

【讨论】：