简介
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主题页面，了解练习和编程项目。
