今宵酒醒何处?杨柳岸,晓风残月。

CSS3修改浏览器滚动条

浏览器默认的滚动条比较丑,可以通过修改CSS文件来实现修改滚动条样式,貌似火狐不能用,可以用这个插件:

1
malihu-custom-scrollbar-plugin

放出效果图:

image

好了直接上代码吧:

CSS3 实现的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style>
::-webkit-scrollbar
{
width: 6px; /* 滚动条宽度 */
height: 6px;
}
::-webkit-scrollbar-track-piece
{
background-color:#dcdcdc; /* 滚动条背景颜色 */
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical
{
height: 5px;
background-color: #686868; /* 滚动条颜色(竖直状态下) */
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:horizontal
{
width: 5px;
background-color: #686868; /* 滚动条颜色(水平状态下) */
-webkit-border-radius: 6px;
}
</style>

在提供一种更好看的样式:(来自webapproach)

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
30
31
32
33
34
35
36
::-webkit-scrollbar {
width: 8px;
height: 8px;
background-color: rgba(0,0,0,.1)
}

::-webkit-scrollbar-track {
border-radius: 10px;
background-color: rgba(0,0,0,.01);
-webkit-box-shadow: inset 0 0 6px transparent
}

::-webkit-scrollbar-track:hover {
background-color: rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.4)
}

::-webkit-scrollbar-track:active {
background-color: rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.1)
}

::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: rgba(0,0,0,.2);
-webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1)
}

::-webkit-scrollbar-thumb:hover {
background-color: rgba(0,0,0,.4);
-webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1)
}

::-webkit-scrollbar-thumb:active {
background: rgba(0,0,0,.4)
}

加到Head里面就行了。

更多功能可百度或者谷歌

1
webkit-scrollbar
看官若是觉得不错,就打发点猫粮钱吧