div中的CSS自定义滚动条

我认为整合有关滚动条，CSS和浏览器兼容性的最新信息会有所帮助。

滚动条CSS支持

当前，没有跨浏览器的滚动条CSS样式定义。最后，我在W3C文章中提到了以下内容，并于最近进行了更新（2014年10月10日）：

某些浏览器（IE，Konqueror）支持非标准属性“ scrollbar-shadow-color”，“ scrollbar-track-color”等。这些属性是非法的：它们既没有在任何CSS规范中定义，也没有被标记为专有（通过在它们前面加上“ -vendor-”）

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

例：

<!-- language: lang-css -->    .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现在具有自己的版本：

• 样式滚动条
• 所有WebKit滚动条样式的演示
• 从WebKit的自定义滚动条中，相关CSS：

::-webkit-scrollbar   {  }::-webkit-scrollbar-button       {  }::-webkit-scrollbar-track        {  }::-webkit-scrollbar-track-piece  {  }::-webkit-scrollbar-thumb        {  }::-webkit-scrollbar-corner       {  }::-webkit-resizer     {  }:horizontal:vertical:decrement:increment:start:end :double-button:single-button:no-button:corner-present:window-inactive

Firefox(Gecko)

从64版开始，Firefox通过属性scrollbar-color（部分为W3C draft）和scrollbar-width（W3C draft）支持滚动条样式。在此答案中可以找到有关实现的一些很好的信息。

防止非法滚动条样式
万一您想防止没有以“ -vendor”为前缀的滚动条样式，W3C上的这篇文章将提供一些基本说明。基本上，您需要将以下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;}