How to Add Custom Styling to your Scrollbar

Did you know that it is possible to change the design of the scroll bar of your website? It doesn’t have to look like the standard scrollbar on almost every website. Just read on this article to find out how to do it.

 

 

By the scrollbar I mean the default vertical scrollable bar that you can see even on the right side of this blog. You may have noticed on some websites that it was customized. For example, it can have a different color and can be rounded. If you check the demo of my first premium Divi child theme Blue Biz, you will see what I mean.

I did some customizations to it and I did it simply by using a few lines of custom CSS code. That’s all that you need to do. However, the effect doesn’t work in all browsers. For example, in Firefox it doesn’t work – you’ll see just the regular default scroll bar. But if you check it in Chrome, you can see it.

Also, you should always use a child theme and store your custom CSS code in its stylesheet file (style.css), not in your Divi Theme Options Custom CSS field.

Here’s the code that I have used:

 

::-webkit-scrollbar {
  background-color: #042654;
  width: 16px;
}

::-webkit-scrollbar-track {
  background-color: #bebebe;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: #8192A9;
  border-radius: 10px;
}

 

Even if you’re not a CSS expert, you should be able to easily understand this code and customize it further, too. I believe you will. ;) Just check my Divi child theme mentioned above and you will see what each selector does.

To briefly summarize it, you can choose the color of the scrollbar thumb, its track and its background color. You can also set the width of the scrollbar, as well as choose border radius for both the scrollbar and its background.

This tweak should work with any WordPress theme as well, not just with Divi.

I believe that this small trick will help you to make your website (or your child theme or whatever you are creating) more attractive. Good luck!