html页面自定义滚动条样式,div中的CSS自定义滚动条

小编典典

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

滚动条CSS支持

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

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

Microsoft

正如其他人提到的那样，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现在具有自己的版本：

样式滚动条

所有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