【问题标题】：Why Chrome does not show CSS ::-webkit-scrollbar scrollbar for iframe?为什么 Chrome 不显示 iframe 的 CSS ::-webkit-scrollbar 滚动条？
【发布时间】：2011-04-27 14:14:17
【问题描述】：

为什么 Chrome 不为 iframe 显示 CSS ::-webkit-scrollbar 滚动条？

演示http://jsfiddle.net/laukstein/C9s3P/

<iframe scrolling="yes" style="overflow-x:hidden; overflow-y:scroll; width:150px; height:50px;" src="http://en.wikipedia.org/wiki/Web_browser"></iframe>

CSS

::-webkit-scrollbar{
    width:0.8em;
    height:0.8em;
    background-color:#fff;
}
::-webkit-scrollbar:hover{
    background-color:#eee;
}
::-webkit-resizer{
    -webkit-border-radius:4px;
    background-color:#666;
}
::-webkit-scrollbar-thumb{
    min-height:0.8em;
    min-width:0.8em;
    -webkit-border-radius:4px;
    background-color: #ddd;
}
::-webkit-scrollbar-thumb:hover{
    background-color: #bbb;
}
::-webkit-scrollbar-thumb:active{
    background-color:#888;
}

【问题讨论】：

太棒了！像 chrome 上的魅力一样工作
WebKit 滚动条不是 CSS3，也从未成为 CSS3 的一部分。
@BoltClock，你是对的。它是浏览器供应商特定的 CSS，例如 Webkit -webkit-mask 等。我用 CSS 重写 CSS3 标签。

标签： css google-chrome iframe webkit scrollbar

【解决方案1】：

它似乎在 Chrome 14 上运行。

【讨论】：

【解决方案2】：

显然，根据http://browsershots.org 的结果，CSS 实现在 Chrome 5 和 6+ 版本之间有所不同。查看您的测试屏幕时，它会显示如下...

行为变化

只是一些关于样式化滚动条行为变化的一般信息。

Chrome 5.0.x - iFrame 显示带有滚动条

Chrome 6.0.x+ - 显示没有滚动条

（整套测试结果@http://browsershots.org/http://jsfiddle.net/laukstein/C9s3P/embedded/result/）

更新

显然Styling Scrollbars 官方页面并没有说它适用于 iFrame，尽管在某一时刻（Chrome 5）它确实如上所示。从 6 开始，行为有所不同。

戴夫发表凯悦酒店于 2009 年 3 月 19 日星期四在下午 2 点 19 分
WebKit 现在支持样式溢出部分的滚动条，列表框、下拉菜单和文本区域。对于那些想跳过的人文章，然后直接转到来源，这里是一个例子 [...]

同一页面上的评论说：

太糟糕了，它不能设置窗口样式滚动条。

iFrame 通常使用 Windows 滚动条。

一种可能性是 Chrome 对 iFrame 或滚动条的实现在 v5 到 v6 之间从非标准滚动条更改为纯 Windows 滚动条，或者从引擎盖下的“伪造”div iFrame（或类似的东西）更改为真正的窗口对于 iFrame，因为浏览器已经在 Windows 平台上发展。

【讨论】：

那么以后的 Chrome 版本是否存在一些 CSS 或 JS 问题？
我在我的答案底部添加了一个更新，基于它在 iFrame 中我最新版本的 Chrome 中不起作用的事实，显然它自 v6 以来就没有，尽管 v5 确实实现了它。

【解决方案3】：

为我工作。也许检查您的 Chrome 版本？（我使用的是 8.0.552.231）

【讨论】：