Question

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

Answer 1

在Internet Explorer中可以使用许多非标准scrollbar-* CSS属性。有关方便的生成器工具，请参阅this page。

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

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滚动条，而不是任何swishy用户主题。 Windows Vista / 7（Aero）用户可能不会为此感谢您。

您当然可以使用<div>制作自己的ersatz-scrollbars，并根据自己的喜好对其进行设置。但是结果几乎总是比真正的滚动条更糟糕，因为您正在尝试复制一个复杂的UI元素，其每个操作系统的预期行为都不同。您可以花费大量时间来重现分页行为，键盘上/下和鼠标滚轮，但它永远不会完全感觉像一个真正的操作系统滚动条一样光滑。

Answer 4

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

This article will help if you decide to use Javascript

更改滚动条的样式

4 个答案: