CSS滚动条式跨浏览器

Question

CSS滚动条式跨浏览器如何定义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

滚动条CSS样式是微软开发人员发明的一种奇怪的样式。它们不是CSS W3C标准的一部分，因此大多数浏览器只是忽略它们。

Answer 2

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 3

纳米ScrollerJS只是简单的使用。我总是用它们.。

Browser compatibility:

• IE7+
• Firefox 3+
• 铬
• 狩猎4+
• 歌剧11.60+

Mobile browsers support:

• iOS 5+(iPhone、iPad和iPodTouch)
• IOS 4(带有多个填充)
• Android Firefox
• Android2.2/2.3原生浏览器(带有多填充)
• Android Opera 11.6(带有多填充)

文档中的代码示例，

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

   ..这里的内容.。