Custom Scrollbar CSS

• In September 2018, W3C CSS Scrollbars defined specifications for customizing the appearance of scrollbars with CSS.
• As of 2020, 96% of internet users are running browsers that support CSS scrollbar styling.
• However, you will need to write two sets of CSS rules to cover Blink and WebKit and also Firefox browsers.

CSS Scrollbar Style

• CSS Scrollbars are supported by Firefox and ::-webkit-scrollbar by Chromium based (Chrome, Edge) and Safari.
• All modern browsers will eventually transition to CSS Scrollbars specification.
• Currently, styling scrollbars for Chrome, Edge, and Safari is available with the vendor prefix pseudo-element -webkit-scrollbar.

The scrollbar-color CSS property sets the color of the scrollbar track and thumb.

Style ScrollBar

Scroll Border

	/* Firefox */
* {
  scrollbar-width: thick; /* none | auto  */
  scrollbar-color: #ffa07a transparent;
}

/* The first applies to the thumb of the scrollbar, the second to the track. */
/* Firefox */

/* Chrome, Edge, Safari */
*::-webkit-scrollbar {
  width: 14px; /* vertical scrollbar */
  height: 14px; /* horizontal scrollbar */
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: #ffa07a;
  border-radius: 14px;
  border: calc(14px / 4) solid #ccc;
}

*::-webkit-scrollbar-thumb:hover {
  background: #ff7f50;
}
/* Chrome, Edge, Safari */
	

			
	
			

		
	

Currently, styling scrollbars for Chrome, Edge, and Safari is available with the vendor prefix pseudo-element -webkit-scrollbar.

References

• DO