How To Create Custom Scrollbars

October 2, 2019
9:19 AM
0

BeginnerChromeCSSCSS3HTML5UI / UX

How To Create Custom Scrollbars

Webkit browsers, such as Chrome, Safari and Opera, supports the non-standard ::-webkit-scrollbar pseudo element, which allows us to modify the look of the browser’s scrollbar.

The following example creates a thin (5px wide) scrollbar, which has a grey track/bar color with box shadow and a green (#6d9f21) handle:

/* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: green; 
  border-radius: 10px;
}

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

About Author

Karthikesavan

I'm the founder of Proficient Designers. I'm a full time PHP, Wordpress, Android app and UI/UX developer who is passionate in coding.

Comments & Replies