自定义火狐浏览器滚动条样式

找了好久，没找到文章，在火狐开发者文档里找到了，记录下。

火狐滚动条样式官方文档

html {
  * {
    scrollbar-color:#f33 green;
    scrollbar-width:thin;
  }
}

预览图

/* Keyword values */
scrollbar-width: auto; /* 系统默认的滚动条宽度 */
scrollbar-width: thin; /* 系统提供的瘦滚动条宽度，或者比默认滚动条宽度更窄的宽度 */
scrollbar-width: none; /* 不显示滚动条，但是该元素依然可以滚动 */

/* Global values */
scrollbar-width: inherit;
scrollbar-width: initial;
scrollbar-width: unset;

/* Keyword values */
scrollbar-color: auto; /* 在没有任何其他相关滚动条颜色属性的情况下，滚动条的轨道部分默认平台渲染。 */
scrollbar-color: dark; /* 显示黑色滚动条，可以是平台提供的滚动条的深色变体，也可以是带深色的自定义滚动条。 */
scrollbar-color: light; /* 显示一个轻量滚动条，可以是平台提供的滚动条的轻微变体，也可以是带有浅色的自定义滚动条。 */

/* <color> values */
scrollbar-color: rebeccapurple green;   /* 将第一种颜色应用于滚动条拇指，第二种颜色应用于滚动条轨道。. */

/* Global values */
scrollbar-color: inherit;
scrollbar-color: initial;
scrollbar-color: unset;

只支持这俩属性，好过没有强。。。自行尝试吧

这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

浏览器兼容.png