前端
, ,
Source
Edit
History

修改滚动条样式

代码块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="box"></div>
<style>
  .box{
    overflow:auto;
  }
  .box::-webkit-scrollbar {
    width: 10px;    
    height: 1px;
  }
  .box::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #E5E5E5;
  }
  .box::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 10px;
    background: #ffffff;
  }
</style>

说明

  • -webkit-scrollbar修改滚动条的整体样式，其中高和宽对应滚动条的尺寸；
  • -webkit-scrollbar-thumb修改滚动条内的小方块样式；
  • -webkit-scrollbar-track修改滚动条内的轨道样式。