Scrollbar Styling in CSS

Although it’s best practice to use the operating system (OS) default scrollbar whenever designing a web page or app, sometimes the full OS scrollbar showing up in the middle of a screen can be intrusive, especially if the element to be scrolled is small (e.g. an overlayed dropdown menu or a code block with long lines).

In cases like these, CSS lets us style the scroll bar to make it less intrusive and more cohesive with the app.

Use judgement when customizing scrollbar styling

If a styled scrollbar improves UX more than it harms it, or scrolling the content is not crucial to the functionality of the UI and it needs to be deemphasized, then custom styling may be a good idea. Otherwise, it’s best to stick with the default OS scrollbar for maximum usability.

Here’s a CSS snippet for a basic, yet flexible, scrollbar that can be dropped into any web app. It uses transparent greys to try to fit into any color theme, dark or light. It will style every scrollbar that appears on the page, except the main window scroll bar.

body ::-webkit-scrollbar {
  width: 8px; /* the thinner this is set, the less usable it becomes */
  height: 8px; /* should be the same as above */
}
body ::-webkit-scrollbar-track {
  background: #80808020;
  border-radius: 4px;
}
body ::-webkit-scrollbar-thumb {
  background-color: #80808070;
  border-radius: 4px;
}
body ::-webkit-scrollbar-thumb:hover {
  /* respond to the user hovering over the scrollbar */
  background-color: #808080a0;
}
body ::-webkit-scrollbar-corner {
  /* without this, there may be a white square in the bottom right corner */
  background: rgba(0, 0, 0, 0);
}

Example Usage

Include this in the main CSS file at the top level (e.g. styles.css or index.css) to apply it to every scrollbar inside the body element. Change or remove body as required, especially if including into a component’s individual style sheet.