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)

# 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 the menu of the blog Sticky. Please drop feedback in comments.

Share This Now:

One Comment

Add a Comment

Your email address will not be published. Required fields are marked *