Custom Scrollbar Selectors

Fahim's text outlines CSS customizations for a scrollbar, using variables for color and size. The `.scrollbar-container` class applies these styles, setting `scrollbar-color`, width, height via `--custom-scrollbar-size`, and border radius via `--custom-scrollbar-borderRadius`. Specific selectors target the thumb (`::-webkit-scrollbar-thumb`) and track (`::-webkit-scrollbar-track`). This allows for easy customization of scrollbar appearance.
generated by granite3.2:8b

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