Customizing the Scrollbar

There are many ways to add ✨ pizzazz ✨ to your site. Here’s how to customize your scrollbar using CSS!

Copy and paste the code below and play around with the look:

Custom CSS:

/* CUSTOM SCROLLBARS *****/

/* Width */
::-webkit-scrollbar {
  width: 12px;
}

/* Track */
::-webkit-scrollbar-track {
  border-radius: 10px;
  border: 1px dashed grey;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: pink;
  border: 1px dashed #801427;
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #f2d7dd;
}

*TIP: If your scrollbar isn’t showing up, double check your width: property and make sure a value is assigned!

For a complete list of scrollbar selectors, check out W3Schools.

Code SnippetsSuki ChanSection 3 - Custom Sites