Create Custom Scrollbars

The various parts

These are the pseudo elements themselves. The real parts of the scroll bars.

//css

::-webkit-scrollbar              { /* 1 */ }
::-webkit-scrollbar-button       { /* 2 */ }
::-webkit-scrollbar-track        { /* 3 */ }
::-webkit-scrollbar-track-piece  { /* 4 */ }
::-webkit-scrollbar-thumb        { /* 5 */ }
::-webkit-scrollbar-corner       { /* 6 */ }
::-webkit-resizer                { /* 7 */ }

The different states

These are pseudo class selectors. Allow a more specific selection of parts, like the scroll bar when in different states.

//css

:horizontal
:vertical
:decrement
:increment
:start
:end 
:double-button
:single-button
:no-button
:corner-present
:window-inactive

• :horizontal – The horizontal pseudo-class applies to slider pieces having a horizontal orientation.
  
   
• :vertical – The vertical pseudo-class applies to slider pieces that are vertically oriented.
  
   
• :decrement – The decrease pseudo-class applies to buttons and track pieces. Indicates if the button or track piece diminish the position of the eye when used (for example, even in a vertical scroll bar to the left on a horizontal scroll bar).
  
   
• :increment – The pseudo class increment corresponds to the buttons and the track pieces. Indicates whether a button or track piece will increase the position of the eye when used (for example, on a vertical scroll bar, right on a horizontal scroll bar).
  
   
• :start – The start pseudo-class applies to buttons and track pieces. It indicates whether the object is placed before the thumb.
  
   
• :end – The end pseudo-class applies to buttons and track pieces. It indicates whether the object is placed after the thumb.
  
   
• :double-button – The pseudo-button double class applies to buttons and track pieces. It is used to detect whether a button is part of a couple of buttons that are together at the same end of a scroll bar. For pieces of track that indicates whether the track piece abuts a couple of buttons.
  
   
• :single-button – The only button pseudo-class applies to buttons and track pieces. It is used to detect whether a button is itself at the end of a scroll bar. To track pieces indicating whether the piece is based on a track button singleton.
  
   
• :no-button – It applies to the parts tracking and indicates whether or not the piece of track runs to the edge of the slider, ie no button on the end of the track.
  
   
• :corner-present – It applies to all parts of the scroll bar and indicates whether or not a corner is present scrollbar.
   
• :window-inactive – It applies to all parts of the scroll bar and indicates whether the window contains a scroll bar is currently active. (In recent nightlies, this kind of pseudo-now applies to :: selection also. We intend to extend it to work with any content and propose it as a new standard pseudo-class).

All together now

These pseudo elements and pseudo-class selectors work together. Here are some random examples:

 //css
 
 ::-webkit-scrollbar-track-piece:start {
   /* Select the top half (or left half) or scrollbar track individually */
}

::-webkit-scrollbar-thumb:window-inactive {
   /* Select the thumb when the browser window isn't in focus */
}

::-webkit-scrollbar-button:horizontal:decrement:hover {
   /* Select the down or left scroll button when it's being hovered by the mouse */
}

Simple Example

To make a very simple custom scrollbar can do this:

//css

::-webkit-scrollbar {
    width: 12px;
}

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

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

What we would like to achieve this in a simple vertical div with overflowing text:

Example