Red

// To target a specific element 
// for the scrollbar styling,
// you first need to target 
// the elements class or id. 

// Example: .red:: like below. 
 .red::-webkit-scrollbar-thumb {
     -webkit-border-radius: 20px;
     border-radius: 20px;
     background: red;
 }

Green

/*Green Scrollbar Styling */
 .green::-webkit-scrollbar-thumb {
     -webkit-border-radius: 20px;
     border-radius: 20px;
     background: green;
 }

Blue

/*Blue Scrollbar Styling */
 .blue::-webkit-scrollbar-thumb {
     -webkit-border-radius: 20px;
     border-radius: 20px;
     background: blue;
 }
 

Yellow

/*Yellow Scrollbar Styling */
 .yellow::-webkit-scrollbar-thumb {
     -webkit-border-radius: 20px;
     border-radius: 20px;
     background: yellow;
 }

Orange

/*Orange Scrollbar Styling */
 .orange::-webkit-scrollbar-thumb {
     -webkit-border-radius: 20px;
     border-radius: 20px;
     background: orange;
 }

Purple

/*Purple Scrollbar Styling */
 .purple::-webkit-scrollbar-thumb {
     -webkit-border-radius: 20px;
     border-radius: 20px;
     background: purple;
 }

How to Create Custom Scrollbars in HTML & CSS using Webkit.

  1. You must add a <style></style> tag to the head custom code area of all the pages where you need a custom scrollbar in your site.
    - This is to be able to write computer readable CSS, which will let browsers know how to style the scrollbars.
  2. Inside the style tag you just added, target the scrollbars with CSS. See example below and above for reference.
    - If you want to update all of the scrollbars everywhere on the site, then just add the webkit selector like below.
  3. Add the styles to the scrollbar & track like you would with any other html element.

If you are unsure about things, look at the page settings of this website to better get a feel of how to do this, or feel free to reach out.

You can clone this on Webflow to mess around with it more.

General Scrollbar CSS Styling

// General Scrollbar styling used on this site:
 ::-webkit-scrollbar {
     width: 15px;
 }

::-webkit-scrollbar-track {
     background-color: rgba(0, 0, 0, .05);
     -webkit-border-radius: 20px;
     border-radius: 20px;
 }

 ::-webkit-scrollbar-thumb {
     -webkit-border-radius: 20px;
     border-radius: 20px;
     background: rgb(54, 49, 49);
 }  

Need a partner?

Make sure you consider my company, Sol Company in your search. We'd love the opportunity to meet with you and learn more about your business goals.