Customize scrollbar using simple CSS

Custom scrollbar

Customize CSS scrollbar

Are you bored of default Scrollbar of the browser, if yes, then get ready to customize it as per your requirement. We will be using simple CSS codes to create the scrollbar.

A nice and quick experiment by Tim Holman. He created 14 vertical scrollbars using only CSS & HTML that work only in WebKit browsers like Google Chrome. No javascript or jquery code is required to create this scrollbar.

The different styling is achieved using webkit-only pseudo properties:

  • -webkit-scrollbar-track: This styles the main track of the scollbar.
  • -webkit-scrollbar: It is the main scrollbar container.
  • -webkit-scrollbar-thumb: This styles the thumb of the scrollbar.

One Sample code

#style-1::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
#style-1::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
#style-1::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}

Hint: Add class="scrollbar" to Parent div and add id="style-1"

Checkout the code & Demo: Click here

Note: This CSS code may not affect the scrollbar change in Mozilla Firefox browser


About

Digital Station is your one-stop resource for a Graphic designer, Website developer & Digital Marketing professionals. Get up-to-date plugins & script to integrate with your website. Yes, all are free. We curate the best of all plugin & web application so that you can continue your work without the hassle of searching. Digital Station also provides you with services such as Website designing, Graphic designing & Digital marketing. We help you grow your business to the next level. Email us your query & we will get back to you soon.

View all posts by