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

Question

在Google Results页面中，我看到的示例仅适用于IE和Opera中的一个案例。

有没有什么办法可以在所有浏览器中保持一致？

此外，浏览器的主滚动条（显示在整个页面上）与带有页面的文本区域中的滚动条之间是否存在差异？如果不是前者，我可以只操纵后者吗？

Answer 1

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

但是，在页面外部滚动的呈现取决于浏览器。

WebKit recently added the ability to style the default scrollbars，但这仍然只适用于页面。

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

史蒂夫

Answer 2

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

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

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

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

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

Answer 3

没有跨浏览器方法。

Answer 4

简短回答否。

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