你是否曾经访问过一个有自定义滚动条的网站，并想知道他们是如何做到的？
读完这篇文章后，你就可以了解有关使用CSS定制和设计滚动条的一切。
自定义滚动条的优点和缺点
在开始编写代码之前，我认为值得看看为你的网站或应用程序创建自定义滚动条的一些潜在利弊。
好处是，与数百万使用浏览器默认滚动条的网站相比，它可以给你的网站一个脱颖而出的机会。任何能够使你的网站对访问者更有印象的东西都会使你长期受益。
另一方面，许多UI设计师认为，你永远不应该干涉像滚动条这样的 "标准化 "UI组件。如果你对滚动条修改得太多，可能会使使用你的网站或应用程序的人感到困惑。
如果你是为自己的个人网站做这件事，只要你喜欢它的外观，你可能不需要担心。
另一方面，如果你正在考虑在工作或一些你想赚钱的项目中实施自定义滚动条，你应该尝试A/B测试，并根据结果做出数据驱动的决定。
在一天结束时，我们大多数人都在写代码，以推动企业的收入，所以你需要始终牢记这一点。
2018年9月，W3CCSS Scrollbars定义了用CSS定制滚动条外观的规范。
截至2020年，96%的互联网用户正在运行支持CSS滚动条造型的浏览器。然而，你需要编写两套CSS规则，以涵盖Blink和WebKit以及Firefox浏览器。
在本教程中，你将学习如何使用CSS来定制滚动条以支持现代浏览器。
前提条件
在学习本文之前，你需要.NET技术。
"供应商前缀 "是一种让你的浏览器在所有浏览器完全支持新的CSS功能之前支持这些功能的方法。
"优雅降级 "是一种处理网页设计的策略，适用于各种不同的浏览器，包括旧的和新的。
"伪元素 "是添加到选择器中的关键词，可以让你对所选元素的特定部分进行样式设计。下面这些是你应该为Chrome、Safari使用的一些 "伪元素"。
- ::-webkit-scrollbar: 栏本身的背景。
- ::-webkit-scrollbar-button：滚动条上的方向性按钮。
- ::-webkit-scrollbar-track: 进度条 "下面 "的空位。
- ::-webkit-scrollbar-track-piece: 进度条最上面的一层没有被拇指覆盖。
- ::-webkit-scrollbar-thumb：可拖动的滚动元素根据可滚动元素的大小来调整大小。
- ::-webkit-scrollbar-corner：可滚动元素的底角，两个滚动条的交汇处。
- ::-webkit-resizer：出现在某些元素底角的滚动条角上面的可拖动的调整大小的手柄。
在Chrome、Edge和Safari中设计滚动条的样式
目前，Chrome、Edge和Safari的滚动条造型可以通过供应商前缀伪元素-webkit-scrollbar来实现。
下面是一个使用::-webkit-scrollbar、::-webkit-scrollbar-track和::webkit-scrollbar-thumb伪元素的例子。
body::-webkit-scrollbar {
body::-webkit-scrollbar-track {
body::-webkit-scrollbar-thumb {
下面是使用这些CSS规则产生的滚动条的截图。
这段代码在Chrome、Edge和Safari的最新版本中都能使用。
不幸的是，这个规范已经被W3C正式放弃了，而且很可能会随着时间的推移而被贬值。
在Firefox中设计滚动条的样式
目前，Firefox的滚动条样式可以通过新的CSS滚动条来实现。
下面是一个使用滚动条宽度和滚动条颜色属性的例子。
body {
下面是使用这些CSS规则产生的滚动条的截图。
这个规范与-webkit-scrollbar规范在控制滚动条的颜色方面有一些共同点。但是，目前还不支持修改 "轨迹拇指 "的填充和圆度。
构建面向未来的滚动条样式
你可以在编写CSS时同时支持-webkit-scrollbar和CSS Scrollbars规范。
下面是一个使用滚动条宽度、滚动条颜色、::-webkit-scrollbar、::-webkit-scrollbar-track、::webkit-scrollbar-thumb的例子。
/* Works on Firefox */
/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar-track {
*::-webkit-scrollbar-thumb {
Blink和WebKit浏览器会忽略它们不认识的规则，而应用-webkit-scrollbar规则。火狐浏览器将忽略它们不认识的规则，而应用CSS滚动条规则。一旦Blink和WebKit浏览器完全废除了-webkit-scrollbar规范，它们将优雅地退回到新的CSS Scrollbars规范。
总结
在这篇文章中，我们向您介绍了如何使用CSS来设计滚动条，以及如何确保这些样式在大多数现代浏览器中被识别。
我们也可以通过隐藏默认的滚动条并使用JavaScript来检测高度和滚动位置来模拟滚动条。然而，这些方法在再现惯性滚动（例如，通过触控板滚动时的衰减运动）等体验时遇到了限制。
如果你想了解更多关于CSS的知识，请查看下面的练习和编程项目的链接。
