CSS3 custom scroll bar style-webkit-scrollbar

When the content exceeds the container, the container will appear scroll bar, its own scroll bar sometimes does not meet our aesthetic requirements, then we can use CSS pseudo-class to implement the scroll bar customization.

First we need to understand the scroll bar. The scroll bar from the appearance is composed of two parts: 1, you can slide the part, we call it slider 2, the track of the scroll bar, that is, the slider track, generally speaking, the color of the slider is darker than the color of the track.

The CSS style of the scroll bar consists of three main parts:

1,::-webkit-scrollbar defines the overall style of the scroll bar;

2,::-webkit-scrollbar-thumb slide block part;

3,::-webkit-scrollbar-thumb track part;

below with Overflow-y:auto; for example (Overflow-x:auto)

HTML code:

123	<divclass="test test-1">        <divclass="scrollbar"></div></div>

CSS code:

12345678910111213141516171819202122232425262728

.test{    width: 50px;    height: 200px;    overflow: auto;    float: left;    margin: 5px;    border: none;}.scrollbar{    width: 30px;    height: 300px;    margin: 0auto;}.test-1::-webkit-scrollbar {/*滚动条整体样式*/        width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/        height: 1px;    }.test-1::-webkit-scrollbar-thumb {/*滚动条里面小方块*/        border-radius: 10px;         -webkit-box-shadow: inset005pxrgba(0,0,0,0.2);        background: #535353;    }.test-1::-webkit-scrollbar-track {/*滚动条里面轨道*/        -webkit-box-shadow: inset0 05pxrgba(0,0,0,0.2);        border-radius: 10px;        background: #EDEDED;    }

The results are as follows:

If you want to change the width of the scroll bar: Change in::-webkit-scrollbar, if you want to change the fillet of the ScrollBar slider, change in::-webkit-scrollbar-thumb, if you want to change the fillet of the track in::- Change in Webkit-scrollbar-track;

In addition, the slider of the scroll bar can not only fill the color but also fill the picture as follows:

CSS code:

1234567891011121314

.test-5::-webkit-scrollbar {/*滚动条整体样式*/    width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/    height: 1px;}.test-5::-webkit-scrollbar-thumb {/*滚动条里面小方块*/        border-radius: 10px;background-color: #F90;background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent25%, transparent50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent75%, transparent);    }.test-5::-webkit-scrollbar-track {/*滚动条里面轨道*/        -webkit-box-shadow: inset005pxrgba(0,0,0,0.2);        /*border-radius: 10px;*/        background: #EDEDED;    }

HTML code:

123	<divclass="test test-5">    <divclass="scrollbar"></div></div>

The effect is as follows:

The above can make their favorite scroll bar;

If you have more than one scroll bar appearing in your document, and you want all of the scrollbar styles to be the same, you don't need to add anything like class, ID, tag name, and so on before the pseudo-element.

CSS3 custom scroll bar style-webkit-scrollbar