如何使用 CSS 更改浏览器滚动条颜色？答案

【问题标题】：How do I change the browser's scrollbar colours using CSS?如何使用 CSS 更改浏览器滚动条颜色？
【发布时间】：2009-12-13 13:43:38
【问题描述】：

在Google Results 页面中，我看到的示例仅在 IE 中有效，在 Opera 中有效。

有没有什么方法可以在所有浏览器中一致地做到这一点？

另外，浏览器的主滚动条（出现在整个页面上）和页面文本区域中的滚动条之间是否有区别？如果不是前者，我可以只操纵后者吗？

【问题讨论】：

【解决方案1】：

您可以使用 CSS 和 JavaScript 的组合在页面内创建自己的滚动条。见https://stackoverflow.com/questions/780674/scroll-bar-with-images。

但是，滚动条的渲染在页面之外取决于浏览器。

编辑：似乎MooScroll 设法“替换”了浏览器的主滚动条，告诉它没有可滚动的内容，然后在窗口的最右侧。聪明！

史蒂夫

【讨论】：

您链接到的问题已被删除...任何线索为什么？ (stackoverflow.com/questions/780674/scroll-bar-with-images)

【解决方案2】：

Steve 的答案很好，但请允许我继续。

在 IE 5.5-7 中（但我认为他们在 8 中摆脱了它），您可以使用一些专有的 MS CSS 属性来设置滚动条的样式。我不会推荐这个。

Steve 提到页面外的滚动条取决于浏览器。虽然这是真的，但您可以通过将 body 元素设置为 overflow: hidden 然后在 HTML 中放置一个带有 height: 100%; width: 100% 的巨大容器来伪造它。

我不建议您触摸用户的滚动条。它们是众所周知的约定，最终用户可以很快识别它们。他们知道如何使用默认的 OS 样式滚动条，而不是您快速尝试跨浏览器 CSS/JS 实现。我想是Steve Krug that said 'Don't make me think!'

您是否见过滚动自己滚动条的 Flash 网站？啊！

【讨论】：

【解决方案3】：

没有跨浏览器的方法。

【讨论】：

【解决方案4】：

简答否。

很遗憾，浏览器的外观不受您的控制 - 您只是提供内容。由浏览器决定如何滚动内容。

【讨论】：