前言：
很多项目都需要改变滚动条的默认样式，并不想单独下载和引入插件。
修改方法：（推荐教程：CSS入门教程）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | &::-webkit-scrollbar { // 滚动条的背景 width: 16px; background: #191a37; height: 14px; }
&::-webkit-scrollbar-track, &::-webkit-scrollbar-thumb { border-radius: 999px; width: 20px; border: 5px solid transparent; }
&::-webkit-scrollbar-track { box-shadow: 1px 1px 5px #191a37 inset; }
&::-webkit-scrollbar-thumb { //滚动条的滑块样式修改 width: 20px; min-height: 20px; background-clip: content-box; box-shadow: 0 0 0 5px #464f70 inset; }
&::-webkit-scrollbar-corner { background: #191a37; } |
精简代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | &::-webkit-scrollbar { width: 6px; height: 6px; background: transparent; }
&::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; }
&:hover::-webkit-scrollbar-thumb { background: hsla(0, 0%, 53%, 0.4); }
&:hover::-webkit-scrollbar-track { background: hsla(0, 0%, 53%, 0.1); } |
这个的优点在于鼠标移上才会显示修改的滚动条。
隐藏某轴的滚动条代码写法：
1 | overflow-x:hidden; |
以上就是css如何修改默认滚动条样式的详细内容，更多请关注php知识-学习天地 www.lxywzjs.com其它相关文章！
