↕️ How to Style a Custom Scrollbar

Browser Support

There are two approaches — the WebKit pseudo-elements (Chrome, Edge, Safari) and the standard CSS properties (Firefox, and increasingly others). For full coverage, use both:

WebKit Scrollbar CSS

/* Track (background) */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #060b14;
}

/* Thumb (the draggable part) */
::-webkit-scrollbar-thumb {
  background: #1a2d45;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #2a3f60;
}

Standard CSS Properties

/* Firefox & modern browsers */
* {
  scrollbar-color: #1a2d45 #060b14; /* thumb track */
  scrollbar-width: thin;
}

/* Complete cross-browser custom scrollbar */
* {
  scrollbar-color: #1a2d45 #060b14;
  scrollbar-width: thin;
}
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #060b14; }
::-webkit-scrollbar-thumb { background: #1a2d45; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #2a3f60; }

Thin Scrollbar for Specific Elements

Apply custom scrollbars to specific overflow containers, not just the page:

.sidebar {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #1a2d45 transparent;
}
.sidebar::-webkit-scrollbar { width: 5px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: #1a2d45; border-radius: 999px; }

Hiding the Scrollbar (While Keeping Scroll)

.no-scrollbar {
  overflow: auto;
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE/Edge */
}
.no-scrollbar::-webkit-scrollbar {
  display: none;                /* Chrome/Safari */
}