CSS3 Examples of custom scroll bar styles

in the previous article, we introduced the CSS Settings div scroll bar style, we all know that when the content outside 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 custom of the scroll bar.

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:

<p class= "Test test-1" ><p class= "ScrollBar" ></p></p>

CSS code:

    . test{    width:50px;    height:200px;    Overflow:auto;    Float:left;    margin:5px;    Border:none;    }    . scrollbar{    width:30px;    height:300px;    margin:0 auto;    }    . Test-1::-webkit-scrollbar {/* scroll bar overall style */            width:10px;     /* aspect corresponding to the size of the scroll bar */            height:1px;        }    . TEST-1::-WEBKIT-SCROLLBAR-THUMB {/* scroll bar inside small box */            border-radius:10px;             -webkit-box-shadow:inset 0 0 5px Rgba (0,0,0,0.2);            Background: #535353;        }    . Test-1::-webkit-scrollbar-track {/* scroll bar Inside Track *            /-webkit-box-shadow:inset 0 0 5px Rgba (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:

    . Test-5::-webkit-scrollbar {/* scroll bar overall style */        width:10px;     /* aspect corresponding to the size of the scroll bar */        height:1px;    }    . TEST-5::-WEBKIT-SCROLLBAR-THUMB {/* scroll bar inside small box */            border-radius:10px;    Background-color: #F90;    Background-image:-webkit-linear-gradient (45deg, Rgba (255, 255, 255,. 2) 25%, transparent 25%, transparent 50%, RGBA (255, 255, 255,. 2) 50%,     rgba (255, 255, 255,. 2) 75%, transparent 75%, transparent);        }    . Test-5::-webkit-scrollbar-track {/* scroll bar Inside Track *            /-webkit-box-shadow:inset 0 0 5px Rgba (0,0,0,0.2);            /*border-radius:10px;*/            background: #EDEDED;        }

HTML code:

<p class= "Test test-5" ><p class= "ScrollBar" ></p></p>

The effect is as follows:

Summarize:

Learn from the examples above to believe that small partners can make their favorite scroll bar, if there will be more than one scroll bar in the document appears, and want all the scroll bar style is the same, then the pseudo-element does not need to add class, ID, tag name, and so on anything.

Related recommendations:

CSS setting div scroll bar Style example

How to troubleshoot scroll bar style issues

html