小编典典

div中的CSS自定义滚动条

html

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


阅读 811

收藏
2020-05-10

共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;
}
2020-05-10