WebKit's scroll bar beautification

As the company's products to the WebKit kernel, in the writing of public CSS, do not want to use the plug-in simulation, the way online review of the next CSS3 scroll bar beautification.

First of all, first on a pair.

The (source http://zhangyaochun.iteye.com/blog/1743283) of the stolen map from the network.

The following are the corresponding pseudo-classes:

::-webkit-scrollbar {/*1*/}/* scroll bar Overall section, can generally set width */::-webkit-scrollbar-button{/*2  */}/* buttons at both ends */

::-webkit-scrollbar-track {/*3*/}/* outer orbit (track itself is the meaning of orbit) */

::-webkit-scrollbar-track-piece {/*4*/}/* Inner scroll slot */

::-webkit-scrollbar-thumb {/*5*/}/* Slider */

::-webkit-scrollbar-corner {/*6*/}/* scroll bar whole part */

::-webkit-resizer {/*7*/}/* The style of the block in the lower right corner */

At the same time, the above pseudo-class can also be used with the following pseudo-class:

1 : Horizontal (horizontal Pseudo-class applies to scroll bars in any horizontal direction)2 3 : Vertical (vertical pseudo-class applies to any vertical scroll bar)4 5 :d Ecrement (Decrement pseudo class applies To button and track fragments. Represents a descending button or track fragment, such as an area and a button that can make the area move up or to the right6 7 : Increment (increment pseudo-class applies to button and track fragments.) Represents an incremented button or track fragment, such as an area and a button that can make the area move down or to the left8 9 : Start (Start pseudo class applies To button and track fragments. Indicates whether the object (Button track fragment) is placed in front of the slider)Ten  One : End pseudo-class applies to button and track fragments. Indicates whether the object (Button track fragment) is placed behind the slider) A  - :d Ouble-button (Double-button Pseudo class applies To button and track fragments. Determines whether the position of the end of the track is a pair of buttons. That is, the track fragment is next to a pair of buttons. ) -  the : Single-button (Single-button Pseudo-class applies to button and track fragments.) Determines whether the position of the end of the track is a button. That is, the orbital fragment is next to a separate button. ) -  - : No-button (No-button pseudo-class means there are no buttons at the end of the track.) ) -  + : Corner-present (corner-present Pseudo-class indicates whether a corner of a scrollbar exists.) ) -  + : Window-inactive (applies to all scrollbars, representing the area that contains the scrollbar, when the focus is not in the window.) ) A  at ::-webkit-scrollbar-track-piece:start{ -    /*Upper half or left half of scroll bar*/ -} -  - ::-webkit-scrollbar-thumb:window-inactive{ -    /*when the focus is not in the state of the current region slider*/ in  -} to  + ::-webkit-scrollbar-button:horizontal:decrement:hover{ -    /*The state of the button on the bottom of the horizontal scroll bar when the mouse*/ the  *}

Usage is connected to use, but the above is from copy, since it is pseudo-class, you can add a different class to decorate, the following is an example I wrote:

1 . Qs-scrollbar::-webkit-scrollbar-track{2 -webkit-box-shadow:inset 0 0 6px rgba (0,0,0,0.3);3 -webkit-border-radius:10px;4 Border-radius:10px;5}6 . Qs-scrollbar::-webkit-scrollbar-button:decrement{7 -webkit-box-shadow:inset 0 0 6px rgba (0,0,0,0.3);8 Height:10px;9 background:URL (".. /img/sprite.png ") -11px 0px no-repeat;Ten Background-color:Transparent; One     /*Background-image:url ("Data:image/svg+xml;charset=utf-8,<svg viewbox= ' 0 0 ' xmlns= ' http://www.w3.org/ 2000/svg ' xmlns:xlink= ' http://www.w3.org/1999/xlink ' ><defs><line id= ' l ' x1= ' x2= ' 7 ' y1= ' 27 ' Stroke= '%236c6c6c ' stroke-width= ' stroke-linecap= ' round '/></defs><g><use xlink:href= '%23l ' opacity= '/><use xlink:href= '%23l ' opacity= '. ' transform= ' rotate (60,60) '/></g></svg> ' );*/ A} - . Qs-scrollbar::-webkit-scrollbar-button:increment{ - -webkit-box-shadow:inset 0 0 6px rgba (0,0,0,0.3); the Height:10px; - background:URL (".. /img/sprite.png ") 0px-0px no-repeat; - Background-color:Transparent; -     /*Background-image:url ("Data:image/svg+xml;charset=utf-8,<svg viewbox= ' 0 0 ' xmlns= ' http://www.w3.org/ 2000/svg ' xmlns:xlink= ' http://www.w3.org/1999/xlink ' ><defs><line id= ' l ' x1= ' x2= ' 7 ' y1= ' 27 ' Stroke= '%236c6c6c ' stroke-width= ' stroke-linecap= ' round '/></defs><g><use xlink:href= '%23l ' opacity= '/><use xlink:href= '%23l ' opacity= '. ' transform= ' rotate (60,60) '/></g></svg> ' );*/ +} -  + /*Handle*/ A . Qs-scrollbar::-webkit-scrollbar-thumb{ at -webkit-border-radius:10px; - Border-radius:10px; - background:Rgba (153,153,153,0.7); - -webkit-box-shadow:inset 0 0 6px rgba (0,0,0,0.5); -} - . Qs-scrollbar::-webkit-scrollbar-thumb:window-inactive{ in background:Rgba (153,153,153,0.4); -}

::-webkit-scrollbar-button followed: Increment or decrement represents the up/down arrows, other pseudo-classes, and so on, is probably used in this way, and the background graph can use the SVG
As outlined below (except for the scroll bar section please ignore)

WebKit's scroll bar beautification