Scrollbar

A customizable scrollbar component for both window and HTMLElement containers.

Provides scroll tracking, drag support, auto-sizing, and built-in styling.

Basic Demo

HTML

<div class="fullpage-center">
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores
    aperiam adipisci earum cum perspiciatis eos, exercitationem distinctio
    mollitia omnis explicabo. Ab natus facilis vitae nemo fugiat magnam
    recusandae harum minus.
  </p>

  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores
    aperiam adipisci earum cum perspiciatis eos, exercitationem distinctio
    mollitia omnis explicabo. Ab natus facilis vitae nemo fugiat magnam
    recusandae harum minus.
  </p>

  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores
    aperiam adipisci earum cum perspiciatis eos, exercitationem distinctio
    mollitia omnis explicabo. Ab natus facilis vitae nemo fugiat magnam
    recusandae harum minus.
  </p>

  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores
    aperiam adipisci earum cum perspiciatis eos, exercitationem distinctio
    mollitia omnis explicabo. Ab natus facilis vitae nemo fugiat magnam
    recusandae harum minus.
  </p>

  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores
    aperiam adipisci earum cum perspiciatis eos, exercitationem distinctio
    mollitia omnis explicabo. Ab natus facilis vitae nemo fugiat magnam
    recusandae harum minus.
  </p>

  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores
    aperiam adipisci earum cum perspiciatis eos, exercitationem distinctio
    mollitia omnis explicabo. Ab natus facilis vitae nemo fugiat magnam
    recusandae harum minus.
  </p>

  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores
    aperiam adipisci earum cum perspiciatis eos, exercitationem distinctio
    mollitia omnis explicabo. Ab natus facilis vitae nemo fugiat magnam
    recusandae harum minus.
  </p>

  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores
    aperiam adipisci earum cum perspiciatis eos, exercitationem distinctio
    mollitia omnis explicabo. Ab natus facilis vitae nemo fugiat magnam
    recusandae harum minus.
  </p>

  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores
    aperiam adipisci earum cum perspiciatis eos, exercitationem distinctio
    mollitia omnis explicabo. Ab natus facilis vitae nemo fugiat magnam
    recusandae harum minus.
  </p>

  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores
    aperiam adipisci earum cum perspiciatis eos, exercitationem distinctio
    mollitia omnis explicabo. Ab natus facilis vitae nemo fugiat magnam
    recusandae harum minus.
  </p>

  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores
    aperiam adipisci earum cum perspiciatis eos, exercitationem distinctio
    mollitia omnis explicabo. Ab natus facilis vitae nemo fugiat magnam
    recusandae harum minus.
  </p>
</div>

CSS

.fullpage-center {
  padding: 1rem;
}

p {
  margin: 0;
}

.v-scrollbar {
  right: 5px !important;
  padding: 10px 0;

  .v-scrollbar__track {
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.1);

    .v-scrollbar__thumb {
      border-radius: inherit;
      background: var(--gradient-sunset, #000);
    }
  }
}

JavaScript

import {
  Scrollbar
} from "vevet";

new Scrollbar({
  autoHide: false
});

Open live demo ↗

More demos

To explore more demos, click here.

Features

• Supports both window-level and nested scrolling
• Draggable scrollbar thumb
• Configurable size and minimum thumb size
• Supports both vertical (y) and horizontal (x) axes
• Provides base styles (minor CSS tweaks recommended for layout stability)
• RTL-compatible
• Automatically adjusts to content and container changes

warning

To prevent layout shifts, native scrollbars should be hidden via CSS:

.your_container {
  -ms-overflow-style: none;
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
    appearance: none;
    width: 0;
    height: 0;
  }
}

Initialization

caution

Scrollbar controls only one axis per instance.

Create separate instances for horizontal and vertical scrolling.

Basic usage:

import { Scrollbar } from 'vevet';

const y = new Scrollbar();

const x = new Scrollbar({
  axis: 'x',
});

Destroying a scrollbar:

y.destroy();
x.destroy();