Skip to main content

Scrollbar

A customizable scrollbar component for both window and HTMLElement containers.

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

Basic 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();