简介

2018年9月，W3Ccss Scrollbars定义了使用css定制滚动条外观的规范。

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

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

前提条件

要阅读本文，您需要：

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

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

目前，Chrome、Edge和Safari的样式滚动条都带有供应商前缀伪元素-webkit-scrollbar.

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

 1body::-webkit-scrollbar {
 2  width: 12px;               /* width of the entire scrollbar */
 3}
 4
 5body::-webkit-scrollbar-track {
 6  background: orange;        /* color of the tracking area */
 7}
 8
 9body::-webkit-scrollbar-thumb {
10  background-color: blue;    /* color of the scroll thumb */
11  border-radius: 20px;       /* roundness of the scroll thumb */
12  border: 3px solid orange;  /* creates padding around scroll thumb */
13}

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

上显示自定义滚动条和蓝色滚动条的示例网页的屏幕截图

这段代码可以在Chrome、Edge和Safari的最新版本中运行。

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

在Firefox中设置滚动条的样式

目前，火狐的样式滚动条在新的css Scrollbars.]中可用

下面是一个使用scllbar-width和scllbar-Color属性的示例：

1body {
2  scrollbar-width: thin;          /* "auto" or "thin" */
3  scrollbar-color: blue orange;   /* scroll thumb and track */ 
4}

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

该规范与控制滚动条颜色的-webkit-scllbar规范有一些共同之处。然而，目前还不支持修改轨迹拇指的填充和圆度。

构建面向未来的滚动条样式

你可以用一种同时支持-webkit-scrollbar和CSS Scrollbars规范的方式来编写CSS。

下面是一个使用scrollbar-width，scrollbar-color，：：-webkit-scrollbar，：：-webkit-scrollbar-track，：：webkit-scrollbar-thumb的例子：

 1/* Works on Firefox */
 2* {
 3  scrollbar-width: thin;
 4  scrollbar-color: blue orange;
 5}
 6
 7/* Works on Chrome, Edge, and Safari */
 8*::-webkit-scrollbar {
 9  width: 12px;
10}
11
12*::-webkit-scrollbar-track {
13  background: orange;
14}
15
16*::-webkit-scrollbar-thumb {
17  background-color: blue;
18  border-radius: 20px;
19  border: 3px solid orange;
20}

Blink和WebKit浏览器将忽略它们不识别的规则，并应用-webkit-scllbar规则。Firefox浏览器将忽略他们不识别的规则，并应用css滚动条‘规则。一旦Blink和WebKit浏览器完全弃用-webkit-scllbar规范，它们将优雅地恢复到新的CSS Scrollbars`规范。

结论

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

还可以通过隐藏默认滚动条并使用JavaScript检测高度和滚动位置来模拟滚动条。然而，这些方法在再现惯性滚动等体验方面遇到了限制(例如，通过触摸板滚动时运动衰减)。

如果您想了解更多关于css的内容，请查看我们的css主题页面获取练习和编程项目。