阿超 > 自定义scroll滑块样式

自定义scroll滑块样式

2022-03-16

前端

这个天地，我来过，我奋战过，我深爱过，我不在乎结局。——今何在 《悟空传》

代码如下：

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
/* 滚动条整体部分 */
::-webkit-scrollbar {
  width: 12px;
}
/* 滚动条两端的按钮 */
::-webkit-scrollbar-button {
}
/* 外层轨道 */
::-webkit-scrollbar-track {
  background: #eee;
  border-radius: 18px;
}
/* 内层滚动槽 */
::-webkit-scrollbar-track-piece {
  
}
/* 滚动的滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 18px;
  background: #bbb;
}
/* 边角 */
::-webkit-scrollbar-corner {
  
}
/* 定义右下角拖动块的样式 */
::-webkit-resizer {
}

效果如下：

image-20220316185037674