浏览器滚动条样式设置

发表于 | 更新于 | 分类于 
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-thumb {
  background-color: rgba(255,255,255,0.2);
  height: 50px;
  outline-offset: 0;
  outline: 1px solid rgba(255,255,255,0.2);
  -webkit-border-radius: 8px;
  border: 1px solid  rgba(255,255,255,0);
}
/*---鼠标点击滚动条显示样式--*/
::-webkit-scrollbar-thumb:hover {
  background-color: #999;
  height: 50px;
  -webkit-border-radius: 8px;
}
/*---滚动条大小--*/
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  -webkit-border-radius: 8px;
}
/*---滚动框背景样式--*/
::-webkit-scrollbar-track-piece {
  background-color: rgba(255,255,255,0.1);
  -webkit-border-radius: 8px;
}
/*---x轴滚动条和y轴滚动条交汇的地方---*/
::-webkit-scrollbar-corner {
  background-color: transparent;
}

其中 ::-webkit-scrollbar 中width 和 height 两个属性

width 定义y轴方向滚动条，thumb的宽度

height 定义x轴方向滚动条，thumb的高度

::-webkit-resizer x轴滚动条和y轴滚动条交汇的地方,用来调整大小