如何使用CSS样式化滚动条

简介

2018年9月，W3C CSS滚动条定义了使用CSS自定义滚动条外观的规范。

截至2020年，96%的互联网用户使用支持CSS滚动条样式的浏览器。但是，您需要编写两套CSS规则来覆盖Blink和WebKit以及Firefox浏览器。

在本教程中，您将学习如何使用CSS自定义滚动条以支持现代浏览器。

先决条件

要跟随本文，您需要：

• 熟悉供应商前缀、伪元素和优雅降级的概念。

在Chrome、Edge和Safari中设置滚动条样式

目前，使用供应商前缀伪元素-webkit-scrollbar可以为Chrome、Edge和Safari设置滚动条样式。

以下是一个使用::-webkit-scrollbar、::-webkit-scrollbar-track和::webkit-scrollbar-thumb伪元素的示例：

body::-webkit-scrollbar {
  width: 12px;               /* 整个滚动条的宽度 */
}
body::-webkit-scrollbar-track {
  background: orange;        /* 跟踪区域的颜色 */
}
body::-webkit-scrollbar-thumb {
  background-color: blue;    /* 滚动条的颜色 */
  border-radius: 20px;       /* 滚动条的圆角 */
  border: 3px solid orange;  /* 在滚动条周围创建填充 */
}

以下是使用这些CSS规则生成的滚动条的屏幕截图：

!使用蓝色滚动条和橙色跟踪的示例网页的滚动条屏幕截图。

这些代码适用于最新版本的Chrome、Edge和Safari。

不幸的是，这个规范已经被W3C正式放弃，并且可能会随着时间的推移被弃用。

在Firefox中设置滚动条样式

目前，使用新的CSS滚动条可以为Firefox设置滚动条样式。

以下是使用scrollbar-width和scrollbar-color属性的示例：

body {
  scrollbar-width: thin;          /* "auto"或"thin" */
  scrollbar-color: blue orange;   /* 滚动条和跟踪的颜色 */
}

以下是使用这些CSS规则生成的滚动条的屏幕截图：

!使用蓝色滚动条和橙色跟踪的示例网页的滚动条屏幕截图。

这个规范与-webkit-scrollbar规范共享一些控制滚动条颜色的共同点。然而，目前还不支持修改“跟踪滑块”的填充和圆角。

构建未来兼容的滚动条样式

您可以编写CSS以支持-webkit-scrollbar和CSS滚动条规范。

以下是一个使用scrollbar-width、scrollbar-color、::-webkit-scrollbar、::-webkit-scrollbar-track、::webkit-scrollbar-thumb的示例：

/* 适用于Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: blue orange;
}
/* 适用于Chrome、Edge和Safari */
*::-webkit-scrollbar {
  width: 12px;
}
*::-webkit-scrollbar-track {
  background: orange;
}
*::-webkit-scrollbar-thumb {
  background-color: blue;
  border-radius: 20px;
  border: 3px solid orange;
}

Blink和WebKit浏览器将忽略它们不认识的规则，并应用-webkit-scrollbar规则。Firefox浏览器将忽略它们不认识的规则，并应用CSS滚动条规则。一旦Blink和WebKit浏览器完全废弃-webkit-scrollbar规范，它们将优雅地回退到新的CSS滚动条规范。

结论

在本文中，您了解了如何使用CSS样式滚动条以及如何确保这些样式在大多数现代浏览器中被识别。

也可以通过隐藏默认滚动条并使用JavaScript检测高度和滚动位置来模拟滚动条。然而，这些方法在复制惯性滚动（例如通过触控板滚动时的衰减运动）方面存在局限性。

如果您想了解更多关于CSS的知识，请查看我们的CSS主题页面，了解练习和编程项目。