css3自定义滚动条样式 -webkit-scrollbar

滚动条css样式主要有3部分组成。

1. ::-webkit-scrollbar 定义滚动条整体样式；

2. ::-webkit-scrollbar-thumb 滑块部分；

3. ::-webkit-scrollbar-track 轨道部分；

以overflow：auto；为例：

html代码：

<div class="test test-1">
    <div class="scrollbar"></div>
</div>

css代码：

.test{
    width:50px;
    height:200px;
    overflow:auto;
    float:left;
    margin:5px;
    border:0;
}

.scrollbar{
    width:300px;
    height:300px;
    margin:0 auto;
}

.test-1::-webkit-scrollbar{
    /*滚动条整体样式*/
    width:10px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height:1px;
}

.test-1::-webkit-scrollbar-thumb{
    /*滚动条中的滚动块*/
    border-radius:10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background:#535353; 
}

.test-1::-webkit-scrollbar-track{
    /*滚动条里面的轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius:10px;
    background:#EDEDED;
}

效果图如下：