Custom Scrollbar Selectors

In our example below, .scrollbar-container could be any element within your page where you intend to display a scrollbar. The visibility also depends on the overflow properly. If you are testing it out when the content isn’t too big to fit into an area, I’d suggest using overflow: scroll for testing the following changes.

:root {
  --custom-scrollbar-track: #d49ad0;
  --custom-scrollbar-thumb: #7585e0;
  --custom-scrollbar-size: 10px;
  --custom-scrollbar-borderRadius: 5px;
}

.scrollbar-container {
  scrollbar-color: var(--custom-scrollbar-thumb) var(--custom-scrollbar-track);
}

.scrollbar-container::-webkit-scrollbar {
  width: var(--custom-scrollbar-size);
  height: var(--custom-scrollbar-size);
}

.scrollbar-container::-webkit-scrollbar-track {
  background: var(--custom-scrollbar-track);
  border-radius: var(--custom-scrollbar-borderRadius);
}

.scrollbar-container::-webkit-scrollbar-thumb {
  background: var(--custom-scrollbar-thumb);
  border-radius: var(--custom-scrollbar-borderRadius);
}

Table of Contents

• ::-webkit-scrollbar:
• ::-webkit-scrollbar-thumb:
• ::-webkit-scrollbar-track:

::-webkit-scrollbar:

This selector represents the whole scrollbar system. I am setting height as well for horizontal scrolling. Adjust as needed.

::-webkit-scrollbar-thumb:

This is the part of the scrollbar that lets you grab and drag.

::-webkit-scrollbar-track:

This selector pertains to the background track against which the thumb moves.