修改Webkit内核的滚动条外观

发表于 | 分类于

浏览网页的时候有没有觉得浏览器自带的滚动条很丑？特别是IE浏览器，完全没有美感可言。当我们看到某些网站使用自定义滚动条，有没有觉得很高端的样子，同时也美观很多。

如果说要兼容所有浏览器的滚动条外观修改，目前来说有点不现实。主要是各个浏览器厂商对新技术的支持程度不一。Webkit内核的浏览器支持所有overflow属性的滚动条样式修改，下面我们使用Css3语言的伪元素与伪类来修改Webkit浏览器滚动条外观。

下面是要修改的主要属性：

1
2
3
4
5
6
7
::-webkit-scrollbar              //滚动条整体
::-webkit-scrollbar-thumb        //滚动条里面的焦点方块
::-webkit-scrollbar-track        //滚动条的焦点外框
::-webkit-scrollbar-button       //滚动条的两端点击按钮
::-webkit-scrollbar-track-piece  //滚动条的焦点内框
::-webkit-scrollbar-corner       //两个滚动条的交汇处
::-webkit-resizer                //改变窗口尺寸的控件

来一段详细的属性值设定， 这个也是本网站在Webkit浏览器中的滚动条效果。

前面的html也可以是其他自定义的元素类，包括所有带overflow的元素。

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
html::-webkit-scrollbar {
    width: 5px;
    height: 5px
}

html::-webkit-scrollbar-button:end:increment,::-webkit-scrollbar-button:start:decrement {
    display: block
}

html::-webkit-scrollbar-button:vertical:end:decrement,::-webkit-scrollbar-button:vertical:start:increment {
    display: none
}

html::-webkit-scrollbar-button:end:increment {
    background-color: #F1F1EF
}

html::-webkit-scrollbar-button:start:decrement {
    background-color: #F1F1EF
}

html::-webkit-scrollbar-track-piece:vertical:start {
    background-color: #F1F1EF
}

html::-webkit-scrollbar-track-piece:vertical:end {
    background-color: #F1F1EF
}

html::-webkit-scrollbar-thumb:vertical {
    width: 6px;
    margin: 0 auto;
    border-radius: 4px;
    background: #e32d39;
    border-width: 8 0
}