CSS 如何在 iframe 上设置滚动条的样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2280645/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to style the scrollbar of on iframe?
提问by manraj82
Is it possible to change the style of the scrollbars of on iframe?
是否可以更改 iframe 滚动条的样式？
i tried to style it by using the following code but it doesnt seem to work
我尝试使用以下代码对其进行样式设置，但似乎不起作用
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;}
and tried
并尝试
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;}
Have I got it wrong? just one more thing the file in the iframe is in a different domain? i have had experiences where javascript didnt work but will it affect CSS as well??
我弄错了吗？iframe中的文件在不同的域中还有一件事吗？我有过 javascript 不起作用的经历，但它也会影响 CSS 吗？？
采纳答案by Guffa
There is no cross-browser way to style the scrollbars.
没有跨浏览器的方式来设置滚动条的样式。
The code that you have only works in Internet Explorer, and only in quirks (non-standard) mode.
您拥有的代码仅适用于 Internet Explorer，并且仅适用于怪癖（非标准）模式。
What you have in the iframe is isolated from the main page, you have to style the scrollbars on the page where they appear, i.e. in the page that you load in the iframe. Any styling that you apply to the main page does not affect what's in the iframe.
您在 iframe 中拥有的内容与主页面是隔离的，您必须在它们出现的页面上设置滚动条的样式，即在您在 iframe 中加载的页面中。您应用于主页的任何样式都不会影响 iframe 中的内容。
If you can't change the content of the page that you load in the iframe, it's not possible to style it's scrollbars.
如果您无法更改在 iframe 中加载的页面内容，则无法为其滚动条设置样式。
回答by Jonny Haynes
Try iframe body, not just body.
尝试iframe body，而不仅仅是身体。
Thiswill work perfectly in Webkit browsers(Safari & Chrome), don't think there'll be a cross browser solution. Well - you could with Javascript!
这将在 Webkit 浏览器（Safari 和 Chrome）中完美运行，不要认为会有跨浏览器解决方案。好吧 - 你可以用Javascript！
回答by DisgruntledGoat
You need to add the CSS to the actual page in the iframe, i.e. if you have page.html and iframe.html then the CSS must be in iframe.html.
您需要将 CSS 添加到 iframe 中的实际页面，即如果您有 page.html 和 iframe.html，那么 CSS 必须在 iframe.html 中。
However, don't rely on that CSS, it only works in IE, or Opera under quirks mode.
但是，不要依赖那个 CSS，它只适用于 IE 或 Opera 下的 quirks 模式。
回答by raveren
Using javascript (i.e. jScrollPane) is the only cross-browser option of styling scrollbars, I'm afraid.
恐怕使用 javascript（即jScrollPane）是样式滚动条的唯一跨浏览器选项。
回答by rahul
AFAIK, you can't do this in a cross browser way. I think the code you have used above will work in IE only.
AFAIK，您不能以跨浏览器的方式执行此操作。我认为您上面使用的代码仅适用于 IE。
回答by Daniel Boomgaardt
Just lose the iframe or any way of styling scrollbars, it's just not done.
只是丢失 iframe 或任何样式滚动条的方式，这还没有完成。
