CSS世界之美化滚动条

浏览器原生的滚动条真的是太过僵硬，想要自然一点，只能自己动手美化一下

实现思路

滚动条相关的样式大多有兼容性问题，而国内的一些教程网站这方面做到都不太行，不如直接查阅 MDN，这里的资料更加完善些

实现代码

由于我主要使用的浏览器是 Chrome 浏览器和 Edge 浏览器，主要参考这两个浏览器的显示效果进行编码，对于其他浏览器的兼容性处理，在后面

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: 8px;
  height: 10px;
}
::-webkit-scrollbar-track-piece {
  background-color: rgba(0, 0, 0, 0);
  border-radius: 0;
}
::-webkit-scrollbar-thumb {
  height: 50px;
  background-image: linear-gradient(
    rgba(173, 15, 15, 0),
    rgb(119, 153, 250),
    rgba(173, 15, 15, 0)
  );
  border-radius: 6px;
  filter: alpha(opacity = 10);
  -moz-opacity: 0.1;
  -khtml-opacity: 0.1;
  opacity: 0.1;
}
::-webkit-scrollbar-thumb:hover {
  background-image: linear-gradient(
    rgba(255, 255, 255, 0),
    rgb(72, 120, 253),
    rgba(255, 255, 255, 0)
  );
}

代码解释

  • ::-webkit-scrollbar：整个滚动条
  • ::-webkit-scrollbar-button：滚动条上的按钮 (上下箭头)
  • ::-webkit-scrollbar-thumb：滚动条上的滚动滑块
  • ::-webkit-scrollbar-track：滚动条轨道
  • ::-webkit-scrollbar-track-piece：滚动条没有滑块的轨道部分
  • ::-webkit-scrollbar-corner：当同时有垂直滚动条和水平滚动条时交汇的部分
  • ::-webkit-resizer：某些元素的corner部分的部分样式

火狐浏览器兼容问题

上面的样式效果都主要是参考 Chrome 浏览器，而 Firefox 浏览器对于上面的样式代码并不兼容，导致 Firefox 浏览器的滚动条需要单独处理

1
2
3
4
* {
  scrollbar-color: #c8d2e0 #f3f4f9;
  scrollbar-width: thin;
}

代码解释

需要注意的是，下面这些属性只兼容 Firefox 浏览器，在其他浏览器是不会到达你设置的效果

  • scrollbar-color：滚动条相关颜色设置
    • 第一个值：滑块颜色
    • 第二个值：滚动条背景颜色
  • scrollbar-width：滚动条的宽度
    • thin：比默认滚动条宽度更细
    • auto：默认的滚动条宽度
    • none：隐藏滚动条，但滚动条依旧可以滚动

参考

MDN ::-webkit-scrollbar