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

Question

在Google 结果页面上，我看到的示例仅在 IE 中有效，而在 Opera 中则有一个案例。

有什么方法可以在所有浏览器中一致地完成吗？

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

score 3 · Accepted Answer

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

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

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

史蒂夫

score 1 · Accepted Answer

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

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

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

我不建议您触摸用户的滚动条。它们是众所周知的约定，最终用户可以很快识别它们。他们知道如何使用默认的 OS 样式滚动条，而不是您快速尝试跨浏览器 CSS/JS 实现。我认为是史蒂夫·克鲁格说“不要让我思考！”

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

score 0 · Accepted Answer

0

没有跨浏览器的方法。

于 2009-04-24T00:05:35.010 回答

score 0 · Accepted Answer

简短的回答没有。

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

4 回答 4