更改滚动条的样式

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/