Skip to main content

Props

Static Props​

Static properties are set during initialization and cannot be modified later.

container​

  • Type: Window | HTMLElement
  • Default: window
  • The element whose scroll position the scrollbar reflects.
  • For nested scroll areas, pass a custom HTMLElement.
  • See demo
// window
const instance = new Scrollbar();

// custom element
const instance = new Scrollbar({
  container: document.getElementById('container'),
});

parent​

  • Type: false | HTMLElement
  • Default: false
  • The parent element where the scrollbar should be appended.
  • If set to false, the scrollbar is appended directly to the container.
  • Use parent for correct behavior when the scrollbar is applied to an HTML element instead of Window.
  • See demo
const instance = new Scrollbar({
  parent: document.getElementById('parent'),
});

class​

  • Type: string | false
  • Default: false
  • Additional CSS class applied to the scrollbar track.
  • If false, no extra class is applied.
const instance = new Scrollbar({
  class: 'my-custom-scrollbar',
});

axis​

  • Type: 'x' | 'y'
  • Default: 'y'
  • Defines the scrolling axis:
    • 'x' for horizontal scrolling
    • 'y' for vertical scrolling
  • See demo
const instance = new Scrollbar({
  axis: 'x',
});

draggable​

  • Type: boolean
  • Default: true
  • Determines whether the scrollbar thumb is draggable.
const instance = new Scrollbar({
  draggable: true,
});

autoHide​

  • Type: boolean
  • Default: true
  • Automatically hides the scrollbar when inactive.
  • See demo
const instance = new Scrollbar({
  autoHide: false,
});

resizeDebounce​

  • Type: number
  • Default: 50
  • Debounce delay in milliseconds for resize event handling.
  • Helps improve performance by limiting frequency of resize calculations.
const instance = new Scrollbar({
  resizeDebounce: 50,
});

Mutable Props​

Mutable properties can be updated at runtime using .updateProps().

Adaptive props

To apply different values by viewport or device, use Responsive with this component as the source. Props will update automatically when breakpoints change.

minSize​

  • Type: number | string
  • Default: 50
  • Minimum size of the scrollbar thumb.
  • Can be specified as a number (pixels) or as a CSS unit string (px, rem, vw, vh, svh).
  • See demo
const instance = new Scrollbar({
  minSize: 50,
});

// change value
instance.updateProps({
  minSize: '10rem',
});

autoSize​

  • Type: boolean
  • Default: true
  • Enables automatic adjustment of the scrollbar thumb size based on the content and container.
  • See demo
const instance = new Scrollbar({
  autoSize: true,
});

// change value
instance.updateProps({
  autoSize: false,
});