Scrollbar

A CSS-only custom scrollbar.

How to

The Scrollbar component is a simple snippet that replaces the native scrollbar with a custom one. This snippet works only on WebKit browsers.

In the demo, we target a specific element using the .custom-scrollbar class. Alternatively, you can customize all the scrollbars using a different selector:

::-webkit-scrollbar {
  width: 16px;
}

::-webkit-scrollbar-track {
  background-color: alpha(var(--color-contrast-higher), 0);
}

/* ... */

Categories

• Controls

Bug report & feedback

Component Github page ↗