滚动条 CSS 支持

目前，不存在跨浏览器滚动条 CSS 样式定义。 The W3C article我在最后提到有以下声明，最近更新(2014 年 10 月 10 日):

Some browsers (IE, Konqueror) support the non-standard properties 'scrollbar-shadow-color', 'scrollbar-track-color' and others. These properties are illegal: they are neither defined in any CSS specification nor are they marked as proprietary (by prefixing them with "-vendor-")

微软

正如其他人所提到的，Microsoft 支持滚动条样式，但仅适用于 IE8 及更高版本。

例子:

.TA {
    scrollbar-3dlight-color:gold;
    scrollbar-arrow-color:blue;
    scrollbar-base-color:;
    scrollbar-darkshadow-color:blue;
    scrollbar-face-color:;
    scrollbar-highlight-color:;
    scrollbar-shadow-color:
}

Chrome 和 Safari (WebKit)

同样，WebKit 现在也有自己的版本:

样式滚动条:https://www.webkit.org/blog/363/styling-scrollbars/
Demo of all WebKit scroll bar styling

来自 Custom scrollbars in WebKit ，相关CSS:

 /* pseudo elements */
 ::-webkit-scrollbar              {  }
 ::-webkit-scrollbar-button       {  }
 ::-webkit-scrollbar-track        {  }
 ::-webkit-scrollbar-track-piece  {  }
 ::-webkit-scrollbar-thumb        {  }
 ::-webkit-scrollbar-corner       {  }
 ::-webkit-resizer                {  }

 /* pseudo class selectors */
 :horizontal
 :vertical
 :decrement
 :increment
 :start
 :end 
 :double-button
 :single-button
 :no-button
 :corner-present
 :window-inactive

火狐(壁虎)

从版本 64 开始，Firefox 通过属性 scrollbar-color(部分是 W3C draft)和 scrollbar-width (W3C draft) 支持滚动条样式。可以在 this answer 中找到有关实现的一些有用信息。 .

跨浏览器滚动条样式

JavaScript 库和插件可以提供跨浏览器的解决方案。有很多选择。

20 jQuery Scrollbar plugin with examples (2012 年 7 月 24 日)
30+ JavaScript/Ajax Techniques for Sliders, Scrollers and Scrollbars (2008 年 5 月 7 日)
21 Useful Scrollbar CSS/JavaScript Styling Tutorials (2012 年 8 月)
15+ Free and Premium jQuery Scrolling Plugins (2012 年 8 月 26 日)

列表可以继续。您最好的选择是搜索、研究和测试可用的解决方案。我相信您将能够找到适合您需求的东西。

防止非法滚动条样式

以防万一您想阻止没有正确前缀“-vendor”的滚动条样式，this article over at W3C provides some basic instructions .基本上，您需要将以下 CSS 添加到与您的浏览器关联的用户样式表中。这些定义将覆盖您访问的任何页面上的无效滚动条样式。

body, html {
  scrollbar-face-color: ThreeDFace !important;
  scrollbar-shadow-color: ThreeDDarkShadow !important;
  scrollbar-highlight-color: ThreeDHighlight !important;
  scrollbar-3dlight-color: ThreeDLightShadow !important;
  scrollbar-darkshadow-color: ThreeDDarkShadow !important;
  scrollbar-track-color: Scrollbar !important;
  scrollbar-arrow-color: ButtonText !important;
}

重复或类似的问题/以上未链接来源

注意:此答案包含来自各种来源的信息。如果使用了来源，那么它也会在此答案中链接。

关于div中的CSS自定义滚动条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9251354/

div中的CSS自定义滚动条