CSS3 custom scroll bar style-webkit-scrollbar (i)

WebKit supports areas with overflow properties, list boxes, drop-down menus, textarea custom styles for scroll bars. Of course, the scroll bar style that is compatible with all browsers currently does not exist.

The composition of the scroll bar:

::-webkit-scrollbar scroll bar integral part
::-webkit-scrollbar-thumb The small box inside the scrollbar, can move up or down (depending on whether it is a vertical scrollbar or a horizontal scroll bar)
::-webkit-scrollbar-track track with scroll bar (with thumb inside)
::-webkit-scrollbar-button the buttons at both ends of the scrollbar track, allowing you to fine-tune the position of the small squares by tapping
::-webkit-scrollbar-track-piece inner track, scroll bar middle section (remove)
::-webkit-scrollbar-corner corner, and two scroll bars at the intersection
::-webkit-resizer A small control that is used to resize an element by dragging at the intersection of two scroll bars

Custom scroll bar simple version:

/* Define the width of the scroll bar and the background, the width of the height of the scroll bar corresponding to the size of */.scrollbar::-webkit-scrollbar{    width:16px;    height:16px;    Background-color: #f5f5f5;} /* Define the track of the ScrollBar, inner shadow and fillet */.scrollbar::-webkit-scrollbar-track{    -webkit-box-shadow:inset 0 0 6px Rgba (0,0,0,.3);    border-radius:10px;    Background-color: #f5f5f5;} /* Define sliders, inner shadows and rounded corners */.scrollbar::-webkit-scrollbar-thumb{    /*width:10px;*/    height:20px;    border-radius:10px;    -webkit-box-shadow:inset 0 0 6px Rgba (0,0,0,.3);    Background-color: #555;}

CSS3 custom scroll bar style-webkit-scrollbar (i)