Designing Custom Scroll Bars in Webkit Browsers

Hello I am ready with a new trick "Custom Scroll Bar in Webkit".
# Webkit means supports -webkit- prefixed properties. Chrome and Safari supports -webkit- prefixed properties.
# You might have seen custom scroll bar aKa Designed scroll bar in a website/blog.
# We can also design custom scroll bar for our blog/website.
# By the way If you've not seen any scroll bar yet we recommend you to open this and experience it. ( Only supported in webkit browsers. So use Safari or Google Chrome. =) )
# Preview'll look like below image:

# You can see in image we've customized scroll bar with light blue color.
# There are many properties related to the scroll bar which is must be prefixed with -webkit.

1. scrollbar
2. scrollbar-button
3. scrollbar-track
4. scrollbar-track-piece
5. scrollbar-thumb
6. scrollbar-corner
7. resizer

# You can understand these properties from the below image (properly :) ).

# In this demo, There is no resizer so it's not denoted.

# There are also some pseudo class selectors. Which allows to design scroll bar perfectly.

# I'm just pasting this section from the webkit's blog. It explains well.

:horizontal � The horizontal pseudo-class applies to any scrollbar pieces that have a horizontal orientation.

:vertical � The vertical pseudo-class applies to any scrollbar pieces that have a vertical orientation.

:decrement � The decrement pseudo-class applies to buttons and track pieces. It indicates whether or not the button or track piece will decrement the view�s position when used (e.g., up on a vertical scrollbar, left on a horizontal scrollbar).

:increment � The increment pseudo-class applies to buttons and track pieces. It indicates whether or not a button or track piece will increment the view�s position when used (e.g., down on a vertical scrollbar, right on a horizontal scrollbar).

: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 double-button pseudo-class applies to buttons and track pieces. It is used to detect whether a button is part of a pair of buttons that are together at the same end of a scrollbar. For track pieces it indicates whether the track piece abuts a pair of buttons.

:single-button � The single-button pseudo-class applies to buttons and track pieces. It is used to detect whether a button is by itself at the end of a scrollbar. For track pieces it indicates whether the track piece abuts a singleton button.

:no-button � Applies to track pieces and indicates whether or not the track piece runs to the edge of the scrollbar, i.e., there is no button at that end of the track.

:corner-present � Applies to all scrollbar pieces and indicates whether or not a scrollbar corner is present.

:window-inactive � Applies to all scrollbar pieces and indicates whether or not the window containing the scrollbar is currently active. (In recent nightlies, this pseudo-class now applies to ::selection as well. We plan to extend it to work with any content and to propose it as a new standard pseudo-class.)

In addition the :enabled, :disabled, :hover and :active pseudo-classes also work with scrollbar pieces.

The display property can be set to none in order to hide specific pieces.

How to apply a custom Scroll Bar in your Blog/Website?

# First of all, Backup your template so if any wrong happens you can get back.
# Then just go to Template Tab and click on Edit HTML and then search for ]]></b:skin>.
# Above ]]></b:skin> paste below code.

::-webkit-scrollbar {
  width: 15px;
}
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 9px rgba(0,0,0,0.7);  
  -moz-box-shadow: inset 0 0 9px rgba(0,0,0,0.7);  
  box-shadow: inset 0 0 9px rgba(0,0,0,0.7);  
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;   
}
::-webkit-scrollbar-thumb {
  -webkit-box-shadow: inset 0 0 7px rgba(0,0,0,1);
  -moz-box-shadow: inset 0 0 7px rgba(0,0,0,1);
  box-shadow: inset 0 0 7px rgba(0,0,0,1);
  background: #00b2b3;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;   
}

# I used to make a good scrollbar using these. You can also add more selectors like -webkit-scrollbar-corner etc.
# You can remove/add/change the box-shadow, border-radius, background values and etc. properties which are supported in this. I suggest you to just change the background color of the scrollbar thumb as per your blog and experience it how it looks..!!
# If you're applying this means changing/adding/removing nothing. It'll look like this.

See the Pen Demo for my blog by kaushalya (@kman) on CodePen

# Live preview of the first pen with code: (Means click on css tab to get the code)

See the Pen Interactive Demo for Scrollbar (* : only for -webkit browsers) by kaushalya (@kman) on CodePen

# If you are applying this in your website then you just need to copy that webkit scroll bar selectors into the css file or style tag.
# I'd like to know about cross-browser scroll bar support from you in comments. So It's cool. Enjoy.
# And yeah We've redesigned our blog and made sticky menu. Please drop feedback in comments.