Class Scrollbar

A custom scrollbar component. Supports both window and HTMLElement containers.

Documentation

Hierarchy (View Summary)

Module<TC, TS, TM>
- Scrollbar

Index

Constructors

constructor

new Scrollbar(
    props?: IScrollbarStaticProps & IScrollbarMutableProps & Partial<
        {
            onDestroy: (data: undefined, ctx: Scrollbar) => void;
            onHide: (data: undefined, ctx: Scrollbar) => void;
            onProps: (data: Partial, ctx: Scrollbar) => void;
            onResize: (data: undefined, ctx: Scrollbar) => void;
            onShow: (data: undefined, ctx: Scrollbar) => void;
            onSwipe: (data: ISwipeCoords, ctx: Scrollbar) => void;
            onSwipeEnd: (data: ISwipeCoords, ctx: Scrollbar) => void;
            onSwipeStart: (data: ISwipeCoords, ctx: Scrollbar) => void;
            onUpdate: (data: undefined, ctx: Scrollbar) => void;
        },
    >,
    onCallbacks?: Partial<
        {
            onDestroy: (data: undefined, ctx: Scrollbar) => void;
            onHide: (data: undefined, ctx: Scrollbar) => void;
            onProps: (data: Partial, ctx: Scrollbar) => void;
            onResize: (data: undefined, ctx: Scrollbar) => void;
            onShow: (data: undefined, ctx: Scrollbar) => void;
            onSwipe: (data: ISwipeCoords, ctx: Scrollbar) => void;
            onSwipeEnd: (data: ISwipeCoords, ctx: Scrollbar) => void;
            onSwipeStart: (data: ISwipeCoords, ctx: Scrollbar) => void;
            onUpdate: (data: undefined, ctx: Scrollbar) => void;
        },
    >,
): Scrollbar
Parameters
- Optionalprops: IScrollbarStaticProps & IScrollbarMutableProps & Partial<
      {
          onDestroy: (data: undefined, ctx: Scrollbar) => void;
          onHide: (data: undefined, ctx: Scrollbar) => void;
          onProps: (data: Partial, ctx: Scrollbar) => void;
          onResize: (data: undefined, ctx: Scrollbar) => void;
          onShow: (data: undefined, ctx: Scrollbar) => void;
          onSwipe: (data: ISwipeCoords, ctx: Scrollbar) => void;
          onSwipeEnd: (data: ISwipeCoords, ctx: Scrollbar) => void;
          onSwipeStart: (data: ISwipeCoords, ctx: Scrollbar) => void;
          onUpdate: (data: undefined, ctx: Scrollbar) => void;
      },
  >
- OptionalonCallbacks: Partial<
      {
          onDestroy: (data: undefined, ctx: Scrollbar) => void;
          onHide: (data: undefined, ctx: Scrollbar) => void;
          onProps: (data: Partial, ctx: Scrollbar) => void;
          onResize: (data: undefined, ctx: Scrollbar) => void;
          onShow: (data: undefined, ctx: Scrollbar) => void;
          onSwipe: (data: ISwipeCoords, ctx: Scrollbar) => void;
          onSwipeEnd: (data: ISwipeCoords, ctx: Scrollbar) => void;
          onSwipeStart: (data: ISwipeCoords, ctx: Scrollbar) => void;
          onUpdate: (data: undefined, ctx: Scrollbar) => void;
      },
  >
Returns Scrollbar
Overrides Module.constructor
- Defined in src/components/Scrollbar/index.ts:75

Accessors

axis

get axis(): "x" | "y"
Scroll axis

Returns "x" | "y"
- Defined in src/components/Scrollbar/index.ts:132

callbacks

get callbacks(): Callbacks<CallbacksMap, this>
Retrieves the module's callbacks instance.

Returns Callbacks<CallbacksMap, this>
Inherited from Module.callbacks
- Defined in src/base/Module/index.ts:76

container

get container(): Window | HTMLElement | Snap
The element to which the scrollbar is applied.

Returns Window | HTMLElement | Snap
- Defined in src/components/Scrollbar/index.ts:113

isDestroyed

get isDestroyed(): boolean
Checks if the module has been destroyed.

Returns boolean
Inherited from Module.isDestroyed
- Defined in src/base/Module/index.ts:66

name

get name(): string
The name of the module, derived from the class name

Returns string
Inherited from Module.name
- Defined in src/base/Module/index.ts:56

outer

get outer(): HTMLElement
Scrollbar outer element

Returns HTMLElement
- Defined in src/components/Scrollbar/index.ts:106

parent

get parent(): HTMLElement
The element where the scrollbar is appended. If parent is not set, it defaults to container or document.body (if applied to window).

Returns HTMLElement
- Defined in src/components/Scrollbar/index.ts:140

prefix

get prefix(): string
Optional prefix for classnames used by the module

Returns string
Overrides Module.prefix
- Defined in src/components/Scrollbar/index.ts:99

props

get props(): TRequiredProps<MutableProps & StaticProps>
Current properties. Do not mutate these directly, use updateProps instead.

Returns TRequiredProps<MutableProps & StaticProps>
Inherited from Module.props
- Defined in src/base/Module/index.ts:46

scrollableSize

get scrollableSize(): number
Returns the total scrollable distance.

Returns number
- Defined in src/components/Scrollbar/index.ts:184

scrollElement

get scrollElement(): HTMLElement | Snap
The actual scrollable element. Returns document.documentElement for window, otherwise the container itself.

Returns HTMLElement | Snap
- Defined in src/components/Scrollbar/index.ts:162

scrollSize

get scrollSize(): number
Returns the total scroll width/height of the content.

Returns number
- Defined in src/components/Scrollbar/index.ts:169

scrollValue

get scrollValue(): number
Returns scrollTop or scrollLeft of the scrollable element.

Returns number
- Defined in src/components/Scrollbar/index.ts:199

thumb

get thumb(): HTMLElement
Scrollbar thumb element (draggable handle).

Returns HTMLElement
- Defined in src/components/Scrollbar/index.ts:127

thumbSize

get thumbSize(): number
Returns the current thumb size.

Returns number
- Defined in src/components/Scrollbar/index.ts:221

track

get track(): HTMLElement
Scrollbar track element (the container of the thumb).

Returns HTMLElement
- Defined in src/components/Scrollbar/index.ts:120

trackSize

get trackSize(): number
Returns the current track size.

Returns number
- Defined in src/components/Scrollbar/index.ts:214

Methods

`Protected`_addTempClassName

_addTempClassName(element: Element, className: string): void
Adds a class name on an element, and keeps track of it for removal when the module is destroyed.
Parameters
- element: Element
  The target DOM element.
- className: string
  The class name to toggle.
Returns void
Inherited from Module._addTempClassName
- Defined in src/base/Module/index.ts:209

`Protected`_cn

_cn(...classNames: string[]): string
Helper function to generate classnames with the module's prefix.
Parameters
- ...classNames: string[]
  The class names to generate.
Returns string
A string of class names with the module's prefix applied.
Inherited from Module._cn
- Defined in src/base/Module/index.ts:199

`Protected`_destroy

_destroy(): void
Destroys the component and cleans up resources.

Returns void
Overrides Module._destroy
- Defined in src/components/Scrollbar/index.ts:560

_getMutable

_getMutable(): {
    __mutableProp: true;
    autoSize: boolean;
    minSize: string
    | number;
}
Get default mutable properties

Returns { __mutableProp: true; autoSize: boolean; minSize: string | number }
- __mutableProp: true
- autoSize: boolean
  Enables automatic adjustment of the scrollbar size.
  Default
  true
- minSize: string | number
  Minimum size of the scrollbar thumb. Accepts numeric values (interpreted as pixels) or CSS units (px, rem, vw, vh, svh).
  Default
  50
Overrides Module._getMutable
- Defined in src/components/Scrollbar/index.ts:41

_getStatic

_getStatic(): {
    __staticProp: true;
    autoHide: boolean;
    axis: "x"
    | "y";
    class: string | false;
    container: Window | HTMLElement | Snap;
    draggable: boolean;
    parent: false | HTMLElement;
    resizeDebounce: number;
}
Get default static properties

Returns {
    __staticProp: true;
    autoHide: boolean;
    axis: "x" | "y";
    class: string | false;
    container: Window | HTMLElement | Snap;
    draggable: boolean;
    parent: false | HTMLElement;
    resizeDebounce: number;
}
- __staticProp: true
- autoHide: boolean
  Automatically hides the scrollbar when inactive.
  Default
  true
- axis: "x" | "y"
  Defines the scrolling axis for the scrollbar.
  - 'x' for horizontal scrolling.
  - 'y' for vertical scrolling.
  Default
  'y'
- class: string | false
  Custom CSS class to be applied to the scrollbar track. If false, no additional class is applied.
  Default
  false
- container: Window | HTMLElement | Snap
  The element to which the scrollbar is applied. Can be either the window or a specific HTML element.
  Default
  window
- draggable: boolean
  Determines whether the scrollbar thumb is draggable.
  Default
  true
- parent: false | HTMLElement
  The parent element where the scrollbar should be appended. If false, the scrollbar is appended directly to the container. For proper behavior, use parent when applying the scrollbar to an HTML element.
  Default
  false
- resizeDebounce: number
  Debounce time (in milliseconds) for handling resize events. Helps improve performance by limiting the frequency of resize calculations.
  Default
  50
Overrides Module._getStatic
- Defined in src/components/Scrollbar/index.ts:36

`Protected`_handleProps

_handleProps(props: Partial<IScrollbarMutableProps>): void
Handles property mutations
Parameters
- props: Partial<IScrollbarMutableProps>
Returns void
Overrides Module._handleProps
- Defined in src/components/Scrollbar/index.ts:228

destroy

destroy(): void
Destroys the module, cleaning up resources, callbacks, and event listeners.

Returns void
Inherited from Module.destroy
- Defined in src/base/Module/index.ts:223

on

on<T extends keyof IScrollbarCallbacksMap>(
    target: T,
    listener: TCallbacksAction<IScrollbarCallbacksMap[T], Scrollbar>,
    settings?: ICallbacksSettings,
): () => void
Adds a custom callback to the module.
Type Parameters
- T extends keyof IScrollbarCallbacksMap
Parameters
- target: T
  The event type to listen for (e.g., 'props', 'destroy').
- listener: TCallbacksAction<IScrollbarCallbacksMap[T], Scrollbar>
  The function to execute when the event is triggered.
- settings: ICallbacksSettings = {}
  Additional settings for the callback.
Returns () => void
Inherited from Module.on
- Defined in src/base/Module/index.ts:185

onDestroy

onDestroy(action: () => void): void
Adds a callback on the module's destruction.
Parameters
- action: () => void
  The function to execute during destruction.
Returns void
Inherited from Module.onDestroy
- Defined in src/base/Module/index.ts:167

resize

resize(): void
Resize the scrollbar.

Returns void
- Defined in src/components/Scrollbar/index.ts:429

updateProps

updateProps(props: Partial<IScrollbarMutableProps>): void
Change module's mutable properties
Parameters
- props: Partial<IScrollbarMutableProps>
Returns void
Inherited from Module.updateProps
- Defined in src/base/Module/index.ts:137

Class Scrollbar

Hierarchy (View Summary)

Index

Constructors

Accessors

Methods

Constructors

constructor

Parameters

Returns Scrollbar

Accessors

axis

Returns "x" | "y"

callbacks

Returns Callbacks<CallbacksMap, this>

container

Returns Window | HTMLElement | Snap

isDestroyed

Returns boolean

name

Returns string

outer

Returns HTMLElement

parent

Returns HTMLElement

prefix

Returns string

props

Returns TRequiredProps<MutableProps & StaticProps>

scrollableSize

Returns number

scrollElement

Returns HTMLElement | Snap

scrollSize

Returns number

scrollValue

Returns number

thumb

Returns HTMLElement

thumbSize

Returns number

track

Returns HTMLElement

trackSize

Returns number

Methods

Protected_addTempClassName

Parameters

Returns void

Protected_cn

Parameters

Returns string

Protected_destroy

Returns void

_getMutable

Returns { __mutableProp: true; autoSize: boolean; minSize: string | number }

__mutableProp: true

autoSize: boolean

Default

minSize: string | number

Default

_getStatic

Returns { __staticProp: true; autoHide: boolean; axis: "x" | "y"; class: string | false; container: Window | HTMLElement | Snap; draggable: boolean; parent: false | HTMLElement; resizeDebounce: number;}

__staticProp: true

autoHide: boolean

Default

axis: "x" | "y"

Default

class: string | false

Default

container: Window | HTMLElement | Snap

Default

draggable: boolean

Default

parent: false | HTMLElement

Default

resizeDebounce: number

Default

Protected_handleProps

Parameters

`Protected`_addTempClassName

`Protected`_cn

`Protected`_destroy

Returns {
__staticProp: true;
autoHide: boolean;
axis: "x" | "y";
class: string | false;
container: Window | HTMLElement | Snap;
draggable: boolean;
parent: false | HTMLElement;
resizeDebounce: number;
}

`Protected`_handleProps