Custom Scrollbar Selectors

The provided CSS code customizes scrollbars within a specific element, `.scrollbar-container`. It defines colors and dimensions for the scrollbar track and thumb, using variables for easy adjustments, and specifically targets the scrollbar system with the `::-webkit-scrollbar` selector. This allows for tailored visual styling of scrollbars in web browsers.
generated by gemma3:4b

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:

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.

Related snippets