div中的CSS自定义滚动条

  • Z时代
  • 2024-01-10
  • 分类：问答

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

回答：

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

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

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

正如其他人提到的那样，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:
    }

同样，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

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

以上是 div中的CSS自定义滚动条 的全部内容， 来源链接： utcz.com/qa/426469.html

回到顶部