自定义 Chrome 滚动条的样式

用任何一款文字编辑器打开之，加入以下代码：

view source

print?

01	::-webkit-scrollbar-track-piece{

02	background-color:#fff;/*滚动条的背景颜色*/

03	-webkit-border-radius:0;/*滚动条的圆角宽度*/

04

}

05	::-webkit-scrollbar{

06	width:8px;/*滚动条的宽度*/

07	height:8px;/*滚动条的高度*/

08

}

09	::-webkit-scrollbar-thumb:vertical{/*垂直滚动条的样式*/

10	height:50px;

11	background-color:#999;

12	-webkit-border-radius:4px;

13	outline:2px solid #fff;

14	outline-offset:-2px;

15	border: 2px solid #fff;

16

}

17	::-webkit-scrollbar-thumb:hover{/*滚动条的hover样式*/

18	height:50px;

19	background-color:#9f9f9f;

20	-webkit-border-radius:4px;

21

}

22	::-webkit-scrollbar-thumb:horizontal{/*水平滚动条的样式*/

23	width: 5px;

24	background-color: #CCCCCC;

25	-webkit-border-radius: 6px;

26

}