CSS滚动条样式跨浏览器

Question

如何定义CSS滚动条样式跨浏览器？我测试了这段代码,它只适用于IE和Opera,但在Chrome,Safari和Firefox中失败了.

<style type="text/css">
<!--    
body {
    scrollbar-face-color: #000000;
    scrollbar-shadow-color: #2D2C4D;
    scrollbar-highlight-color:#7D7E94;
    scrollbar-3dlight-color: #7D7E94;
    scrollbar-darkshadow-color: #2D2C4D;
    scrollbar-track-color: #7D7E94;
    scrollbar-arrow-color: #C1C1D1;
}
-->
</style>

Answer 1

Webkit对滚动条的支持非常复杂.这个CSS提供了一个非常小的滚动条,带有浅灰色轨道和一个较暗的拇指:

::-webkit-scrollbar
{
  width: 12px;  /* for vertical scrollbars */
  height: 12px; /* for horizontal scrollbars */
}

::-webkit-scrollbar-track
{
  background: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb
{
  background: rgba(0, 0, 0, 0.5);
}

这个答案是附加信息的绝佳来源.

Answer 2

Scrollbar CSS样式是微软开发人员发明的奇怪之处.它们不是CSS的W3C标准的一部分,因此大多数浏览器都忽略它们.

Answer 3

jScrollPane是跨浏览器滚动条的一个很好的解决方案,并且很好地降级.

Answer 4

nanoScrollerJS简单易用.我总是用它们......

Browser compatibility:

• IE7 +
• Firefox 3+
• 铬
• Safari 4+
• Opera 11.60+

Mobile browsers support:

• iOS 5+(iPhone,iPad和iPod Touch)
• iOS 4(带有polyfill)
• Android Firefox
• Android 2.2/2.3原生浏览器(带有polyfill)
• Android Opera 11.6(带有polyfill)

文档中的代码示例,

1. 标记 - 需要以下类型的标记结构才能使插件正常工作.

   ......这里的内容......