Custom styles example

Scrollbar and rail with custom colors, radius, opacity and border. Hover or drag the scrollbar to see the active state.

Extra element with longer content, and on hover expand,
showing that scrollbar is reactive

Some Content
Some Content
Some Content
Some Content
Some Content
Some Content
Some Content
Some Content
Some Content
Some Content

Colors and radius are changed only with CSS variables - see CSS → Styles for the full list. Things that have no variable, like opacity or border here, are your own rules on the pseudo-elements:

• bar (scrollbar thumb): outer element .light-scrollbar-wrapper-outside, ::before - x, ::after - y,
• rail: inner element .light-scrollbar-wrapper-inside.light-scrollbar-rail, ::before - x, ::after - y,
• hover and drag: hover-x / hover-y and active-x / active-y classes on the outer element.

SCSS

The styles used in the example above:

// any parent of the scrollbar (or the scrollbar element itself) - keeps the custom look to this one scrollbar
.custom-scrollbar {
  // colors and radius - only CSS variables, no selectors to override
  // (only the ones to change - all of them have defaults). With the rail on, the scrollbar thumb
  // uses the `--light-scrollbar-rail-bar-*` colors
  --light-scrollbar-rail-bar-background: #8b5cf6;
  --light-scrollbar-rail-bar-background-active: #6d28d9;
  --light-scrollbar-bar-radius: 2px;
  --light-scrollbar-rail-background: #ede9fe;
  --light-scrollbar-rail-radius: 0;

  // anything else (no variable for it) - your own rules on the pseudo-elements

  // bar: ::before (x) and ::after (y) of the outer element - half transparent until hovered or dragged
  .light-scrollbar-wrapper-outside {
    &::before,
    &::after {
      opacity: 0.6;
    }

    &.hover-x::before,
    &.active-x::before,
    &.hover-y::after,
    &.active-y::after {
      opacity: 1;
    }
  }

  // rail: ::before (x) and ::after (y) of the inner element - with a border drawn inside the rail size
  .light-scrollbar-wrapper-inside.light-scrollbar-rail {
    &::before,
    &::after {
      border: 1px solid #c4b5fd;
      box-sizing: border-box;
    }
  }
}

CSS

The same styles compiled to plain CSS:

.custom-scrollbar {
  --light-scrollbar-rail-bar-background: #8b5cf6;
  --light-scrollbar-rail-bar-background-active: #6d28d9;
  --light-scrollbar-bar-radius: 2px;
  --light-scrollbar-rail-background: #ede9fe;
  --light-scrollbar-rail-radius: 0;
}
.custom-scrollbar .light-scrollbar-wrapper-outside::before,
.custom-scrollbar .light-scrollbar-wrapper-outside::after {
  opacity: 0.6;
}
.custom-scrollbar .light-scrollbar-wrapper-outside.hover-x::before,
.custom-scrollbar .light-scrollbar-wrapper-outside.active-x::before,
.custom-scrollbar .light-scrollbar-wrapper-outside.hover-y::after,
.custom-scrollbar .light-scrollbar-wrapper-outside.active-y::after {
  opacity: 1;
}
.custom-scrollbar .light-scrollbar-wrapper-inside.light-scrollbar-rail::before,
.custom-scrollbar .light-scrollbar-wrapper-inside.light-scrollbar-rail::after {
  border: 1px solid #c4b5fd;
  box-sizing: border-box;
}

attach

import { attach } from "@frsource/light-scrollbar";
import { rail } from "@frsource/light-scrollbar/rail";
import "@frsource/light-scrollbar/dist/index.css";
import "@frsource/light-scrollbar/dist/rail.css";
import "./customStyles.scss";

attach(document.querySelector(".custom-scrollbar .my-scrollbar"), {
  enableRail: true,
  plugins: [rail],
  // 6px scrollbar in the middle of the 12px rail
  bar: { y: { width: 6, offset: [3, 0] }, x: { height: 6, offset: [0, 3] } },
  rail: { y: { width: 12, offset: [0, 0] }, x: { height: 12, offset: [0, 0] } },
});