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