main_leaderboard, all: [728,90][970,90][320,50][468,60]

How TO - Custom Scrollbar

Learn how to create a custom scrollbar with CSS.

Custom Scrollbars

How To Create Custom Scrollbars

Webkit browsers, such as Chrome, Safari and Opera, supports the non-standard ::-webkit-scrollbar pseudo element, which allows us to modify the look of the browser's scrollbar.

The following example creates a thin (10px wide) scrollbar, which has a grey track/bar
color and a dark-grey (#888) handle:

This example creates a scrollbar with box shadow:

Scrollbar Selectors

For webkit browsers, you can use the following pseudo elements to customize the browser's scrollbar:

• 
  ::-webkit-scrollbar the scrollbar


• 
  ::-webkit-scrollbar-button the buttons on the scrollbar (arrows pointing upwards and downwards).


• 
  ::-webkit-scrollbar-thumb the draggable scrolling handle.


• 
  ::-webkit-scrollbar-track the track (progress bar) of the scrollbar.


• 
  ::-webkit-scrollbar-track-piece the track (progress bar) NOT covered by the handle.


• 
  ::-webkit-scrollbar-corner the bottom corner of the scrollbar, where both horizontal and veritcal scrollbars meet.


• 
  ::-webkit-resizer the draggable resizing handle that appears at the bottom corner of some elements.