Modify the browser's scroll bar style

In the daily development, the browser that comes with a scroll bar style relatively ugly, and sometimes does not match the overall tone system, because of the need to modify the scroll bar style

From the outside, the scroll bar is composed of two parts: 1 part slidable, we call the slider 2, the scroll bar track, i.e., track the slider, the slider generally darker than the color of the track.

css styles

 1 div::-webkit-scrollbar{
 2   width:12px;
 3   height:12px;
 4 }
 5 div::-webkit-scrollbar-track{
 6   background: rgb(239, 239, 239);
 7   border-radius:2px;
 8 }
 9 div::-webkit-scrollbar-thumb{
10   background: #bfbfbf;
11   border-radius:10px;
12 }
13 div::-webkit-scrollbar-thumb:hover{
14   background: #888;
15 }
16 div::-webkit-scrollbar-corner{
17   background: #179a16;
18 }

Parameter Description

:: - webkit-scrollbar integral part of the scroll bar
:: - webkit-scrollbar-thumb scroll bar inside the small box, can be moved upward downward (moved to the left or right, depending on whether the vertical scroll bar is a horizontal scroll bar)
:: - webkit-scrollbar-track of the scroll bar track (which is equipped with Thumb)
:: - at both ends of the track buttons webkit-scrollbar-button scroll bar that allows fine-tuning the position by clicking on the small square.
:: - webkit-scrollbar-track-piece inner orbit scroll bar intermediate portion (removed)
:: - webkit-scrollbar-corner edges, that is the intersection of two scrollbars
:: - for adjusting the size of the element by dragging widgets on the corner of webkit-resizer two scroll bars