CSS3 -webkit-scrollbar滾動條皮膚美化實現，利用-webkit-scrollbar，-webkit-scrollbar-track，-webkit-scrollbar-thumb這2個屬性設置不同樣式的滾動條。

下面是5個滾動條樣式。

css代碼

 1 .test1::-webkit-scrollbar {     //滾動條的寬度
 2  width: 8px;     
 3 }
 4  .test1::-webkit-scrollbar-track {    //滾動條的樣式
 5  background-color:#808080;
 6  -webkit-border-radius: 2em;
 
 7  -moz-border-radius: 2em;
 8  border-radius:2em;
 9 }
10  .test1::-webkit-scrollbar-thumb {   //滾動滑塊的樣式
11  background-color:#ff4400;
12  -webkit-border-radius: 2em;
13  -moz-border-radius: 2em;
14  border-radius:2em;
15 }
16 .test2::-webkit-scrollbar {
17  width: 8px;
18 }
19  .test2::-webkit-scrollbar-track {
 
20  background-color:#fff;
21  -webkit-border-radius: 2em;
22  -moz-border-radius: 2em;
23  border-radius:2em;
24  border:1px solid #ccc;
25 }
26  .test2::-webkit-scrollbar-thumb {
27  background-color: #F90;
28  background-image: -webkit-linear-gradient(45deg,  rgba(255, 255, 255, .4) 25%,  transparent 25
 
%,  transparent 50%,  rgba(255, 255, 255, .4) 50%,  rgba(255, 255, 255, .4) 75%,  transparent 75%,  transparent);
29  -webkit-border-radius: 2em;
30  -moz-border-radius: 2em;
31  border-radius:2em;
32 }
33 .test3::-webkit-scrollbar {
34  width: 12px;
35 }
36  .test3::-webkit-scrollbar-track {
37  background-color:#f5f5f5;
38  -webkit-border-radius: 2em;
39  -moz-border-radius: 2em;
40  border-radius:2em;
41 }
42  .test3::-webkit-scrollbar-thumb {
43  border-radius: 10px;
44  background-color: #FFF;
45  background-image: -webkit-gradient(linear,  40% 0%,  75% 84%,  from(#4D9C41),  to(#19911D),  color-stop(.6, #54DE5D));
46  -webkit-border-radius: 2em;
47  -moz-border-radius: 2em;
48  border-radius:2em;
49 }
50 .test4{
51     width:500px;
52     overflow:scroll !important;
53     width:600px;
54 }
55 .test4>div{
56     width:1000px;
57 }
58 .test4::-webkit-scrollbar {
59  width: 12px;
60  height:12px;
61 }
62  .test4::-webkit-scrollbar-track {
63  background-color:#f5f5f5;
64  -webkit-border-radius: 2em;
65  -moz-border-radius: 2em;
66  border-radius:2em;
67 }
68  .test4::-webkit-scrollbar-thumb {
69  border-radius: 10px;
70  background-color: #F90;
71   background-image: -webkit-linear-gradient(90deg,  rgba(255, 255, 255, .4) 25%,  transparent 25%,  transparent 50%,  rgba(255, 255, 255, .4) 50%,  rgba(255, 255, 255, .4) 75%,  transparent 75%,  transparent);
72  -webkit-border-radius: 2em;
73  -moz-border-radius: 2em;
74  border-radius:2em;
75 }
76 .test5::-webkit-scrollbar {
77  width: 12px;
78  height:12px;
79 }
80  .test5::-webkit-scrollbar-track {
81  background-color:#f5f5f5;
82  
83 }
84  .test5::-webkit-scrollbar-thumb {
85  background-color: #d52828;
86 }

CSS3滾動條美化,CSS3滾動條皮膚