更改滚动条的样式

Question

是否可以更改所有浏览器的滚动条样式？如果是的话，怎么办？

Answer 1

在 Internet Explorer 中可以使用许多非标准

scrollbar-*

CSS 属性。请参阅此页以获取方便的生成器工具。

除此之外，只能使用自定义的 JavaScript 驱动的滚动条解决方案。 jScrollPane jQuery 插件看起来非常漂亮且易于安装。这里是一个示例页面。

Answer 2

目前标准尚未解决滚动条的样式和编程问题，但一些供应商提供了扩展来解决桌面 Web 浏览器中的此问题。如果您想使用自定义滚动条，jScrollPane jQuery 插件是一个很好的选择。

供应商扩展

Internet Explorer（从版本 8 开始）对 CSS 和 DOM 进行了扩展，允许您仅指定滚动条不同部分的颜色。

Microsoft 文档的更新链接如下：http://msdn.microsoft.com/en-us/library/ff974092(v=VS.85).aspx。您只需查看以“-ms-scrollbar”开头的所有属性。

WebKit（例如 Safari 和 Chrome）有一个用于设置滚动条样式的 CSS 伪元素，它允许您对其应用任何 CSS 属性。要了解更多信息，请参阅此 Surfin' Safari 博客文章：http://webkit.org/blog/363/styling-scrollbars/

示例：

::-webkit-scrollbar
{
    width: 13px;
    height: 13px;
}

Mozilla（例如 Firefox）和 Opera 似乎不支持滚动条样式。

自定义滚动条

如果您想要自定义滚动条，

关于 jScrollPane jQuery 插件是一个很好的选择。它在解决滚动条的预期功能方面非常全面，并且可以防止您滚动自己的滚动条。

认识到 jScrollPane 取代了浏览器的本机滚动条非常重要，并且您可能不会发现这些自定义滚动条的“触摸和响应能力”与“真实的滚动条”一样好。但话又说回来，如果您重视形式而不是功能，那么它可能就足够了。

这是 jScrollPane 文档的最新链接：http://jscrollpane.kelvinluck.com/

Answer 3

不。 IE 允许您为滚动条的某些组成部分设置颜色。 Opera 允许其中一些但不是全部风格。

随着 UI 转向复杂的基于图像的滚动条主题，滚动条颜色样式变得越来越无关紧要。在 IE 中，设置任何颜色都会将渲染恢复为 Windows 2000 样式的简单 3D 滚动条，而不是任何时髦的用户主题。 Windows Vista/7 (Aero) 用户可能不会为此感谢您。

您当然可以用

<div>

制作您自己的仿制滚动条，并按照您喜欢的方式设置它们的样式。但结果几乎总是比真正的滚动条表现得更差，因为您试图复制一个复杂的 UI 元素，其预期行为对于每个操作系统都是不同的。您可以花费大量时间来重现分页行为、键盘向上/向下和鼠标滚轮，但它永远不会像真正的操作系统滚动条那样相当平滑。

Answer 4

您可以使用一点 Javascript 为所有浏览器设置滚动条样式。但目前还没有办法仅使用 CSS 作为跨浏览器解决方案来设置它们的样式。

Answer 5

如果您使用 PHP，这里的函数将在作为参数传递给该函数的类中输出所有浏览器所需的 css。然后您在脚本的