css自定义滚动条

发表于 | 更新于 | 阅读次数 1
css自定义滚动条样式，滚动条漂亮起来吧

http://www.xuanfengge.com/css3-webkit-scrollbar.html

CSS3自定义滚动条样式 -webkit-scrollbar

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar{
  width: 0.8rem;
  height: 0.8rem;
  background-color: #eee;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track{
  -webkit-box-shadow: inset 0 0 0.4rem rgba(0,0,0,0.3);
  border-radius: 0.8rem;
  background-color: #eee;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb{
  border-radius: 0.8rem;
  -webkit-box-shadow: inset 0 0 0.4rem rgba(0,0,0,.3);
  background-color: #ccc;
}