div中的CSS自定义滚动条

Question

如何通过CSS（级联样式表）为一个div页面而不是整个页面自定义滚动条？

Answer 1

我认为整合有关滚动条，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：

/* 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

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;
}