CSS3 custom scroll bar style-webkit-scrollbar

CSS3 custom scroll bar style-webkit-scrollbar

Sometimes I think the original scroll bar that the browser comes with is not very beautiful, how does the WebKit browser customize the scroll bar?

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             scroll bar inside the small box, can move up or down (depending on whether the vertical scroll bar or horizontal scroll bar)::- Webkit-scrollbar-track      scroll bar track (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 clicking:- Webkit-scrollbar-track-piece    inner track, scroll bar Middle (remove)::-webkit-scrollbar-corner     Corner, and two scroll bar intersection::-webkit-resizer A       small control at the intersection of two scroll bars for resizing elements by dragging

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;}

Custom scroll bars:

In addition, there are: http://blog.csdn.net/hanshileiai/article/details/40398177

CSS3 custom scroll bar style-webkit-scrollbar