CSS3 custom scroll bar style::webkit-scrollbar sample code detailed explanation

::-webkit-scrollbar  
{  
    width: 6px;  
    height: 6px;  
    background-color: #F5F5F5;  
}

::-webkit-scrollbar-track  
{  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
    border-radius: 10px;  
    background-color: #FFF;  
}

::-webkit-scrollbar-thumb  
{  
    border-radius: 10px;  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
    background-color: #AAA;  
}

:horizontal  
//The horizontal pseudo-class applies to any horizontal scroll bar: vertical  
//The vertical pseudo-class applies to any vertical scroll bar: decrement  
//The decrement pseudo-class applies to buttons and track pieces. A button or track fragment that represents a decrement, such as a region or button that can move a region up or to the right: increment  
//The increment pseudo-class applies to buttons and track pieces. Indicates an incremental button or track fragment, such as a region or button that can move a region down or to the left: start  
//The start pseudo-class applies to buttons and track pieces. Indicates whether the object (button track fragment) is placed in front of the slider: end  
//end pseudo-class applies to buttons and track pieces. Indicates whether the object (button track fragment) is placed behind the slider: double-button  
//The double-button pseudo-class applies to both buttons and track pieces. Determines whether the track ends at a pair of buttons. That is, the orbital debris is next to a pair of buttons together.  
  
:single-button  
//The single-button pseudo-class applies to both buttons and track pieces. Determines whether the end of the track is a button. That is, the orbital fragments are next to a separate button.  
  
:no-button  
The no-button pseudo-class indicates that there is no button at the end of the track.  
  
:corner-present  
//The corner-present pseudo-class indicates whether the corner of the scroll bar exists.  
  
:window-inactive  
//Applicable to all scroll bars, indicating the area containing the scroll bar when the focus is not on the window.  
  
::-webkit-scrollbar-track-piece:start {  
/Scroll bar top or left half/  
}  
  
::-webkit-scrollbar-thumb:window-inactive {  
/When the focus is not in the current area slider state/  
}  
  
::-webkit-scrollbar-button:horizontal:decrement:hover {  
/State when the mouse is on the button below the horizontal scroll bar/  
}