How to make custom scrollbar in html with pure css

Learn how to make a custom scrollbar with CSS

Step by step instructions to Create Custom Scroll bars in Web pages

Webkit programs, like Chrome, Safari and Opera, has the non-standard ::- webkit-scrollbar pseudo element, which allow us to customize the appearance of the webpage's scroll bar.

These pseudo elements are:

• ::-webkit-scrollbar  this is the background of the scrollbar
• ::-webkit-scrollbar-button  it is the directional buttons on the scrollbar
• ::-webkit-scrollbar-thumb  it is the draggable scrolling element
• ::-webkit-scrollbar-track  it is the empty space under the progress bar
• ::-webkit-scrollbar-track-piece  it is the top-most layer of the the progress bar not covered by the scroll thumb
• ::-webkit-scrollbar-corner it is the bottom corner of the scrollable element, where two scrollbars might meet
• ::-webkit-resizer  it is the draggable resizing handle that appears above the scrollbar-corner at the bottom corner of some elements

But these won't work on some browsers click here to view the supported browsers.

Styling the scrollbar

To modify the look of the scrollbar we have to put the above pseudo elements into the css file or inside the style tag and write the custom properties like this:

::-webkit-scrollbar {
  max-width: 10px;
  max-height: 10px;
}

The above code will set the height and with of the scrollbar (for X and Y coordinates).

Now we are going to style the thumb of scrollbar

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: linear-gradient(left, #96a6bf, #63738c);
  box-shadow: inset 0 0 1px 1px #5c6670;
}

This code will make the edge of the thumb curved and change the background color.

Next step is changing the style of the scroll track

.custom::-webkit-scrollbar-track {
  border-radius: 10px;
  background: #eee;
  box-shadow: 0 0 1px 0px #bbb, inset 0 0 7px rgba(0, 0, 0, 0.3);
}

This code is almost same like the previous except the colors.

Demo

Click here to see the demo.

Done

The tutorial is complete. Try to play around with the different properties and learn from the mistakes.

Thank you for reading this till the end and don't worry, ask your doubts in the comment section.