SheetXL - v0.8.0-beta.9+sites.210.e2d420901
    Preparing search index...

    Interface ScrollbarProps

    interface ScrollbarProps {
        maxThumbSize?: number;
        minThumbSize?: number;
        offset: number;
        onScrollOffset: (
            offset: number,
            viewportSize: number,
            totalSize: number,
        ) => void;
        onThumbDrag?: (event: ThumbDragEvent) => void;
        onThumbEdgeHold?: (edge: -1 | 1, tick: TrackEdgeTick) => boolean;
        orientation: ScrollbarOrientation;
        propsThumb?: HTMLAttributes<HTMLElement>;
        propsTouchThumb?: Partial<TouchThumbHandleProps>;
        ref?: Ref<IScrollbarElement>;
        renderScrollButtonEnd?: (props: ScrollButtonProps) => ReactElement;
        renderScrollButtonStart?: (props: ScrollButtonProps) => ReactElement;
        scrollButtonAdditionalRepeatDelay?: number;
        scrollButtonIncrement?:
            | number
            | ((offset: number, viewport: number, totalSize: number) => number);
        scrollButtonInitialRepeatDelay?: number;
        showCustomScrollButtons?: boolean;
        totalSize: number;
        viewportSize: number;
    }

    Hierarchy

    • HTMLAttributes<HTMLElement>
      • ScrollbarProps
    Index
    maxThumbSize? minThumbSize? offset onScrollOffset onThumbDrag? onThumbEdgeHold? orientation propsThumb? propsTouchThumb? ref? renderScrollButtonEnd? renderScrollButtonStart? scrollButtonAdditionalRepeatDelay? scrollButtonIncrement? scrollButtonInitialRepeatDelay? showCustomScrollButtons? totalSize viewportSize
    maxThumbSize?: number

    The maximum size of the thumb in pixels.

    undefined (no maximum size)
    minThumbSize?: number

    The minimum size of the thumb in pixels.

    24
    offset: number
    onScrollOffset: (
        offset: number,
        viewportSize: number,
        totalSize: number,
    ) => void
    onThumbDrag?: (event: ThumbDragEvent) => void

    Thumb-drag lifecycle — fired for both the desktop thumb and the touch grip (raw DOM events can't represent this faithfully: pointer capture retargets the release, and the engine filters non-primary/disabled presses). A virtual/elastic wrapper pins its region while a drag is in flight; a client anchors drag UI (tooltips) to ThumbDragEvent.element.

    onThumbEdgeHold?: (edge: -1 | 1, tick: TrackEdgeTick) => boolean

    Called on a repeating tick while the thumb is dragged past a track end and held there. Advance the scroll one step and return whether more scroll remains (false stops the ticking).

    This is how an elastic/virtual wrapper (e.g. VirtualScrollbar) extends its region under a held thumb — the scrollbar itself has no elastic knowledge. Leave unset for a linear scrollbar: its thumb at the track end IS the real end, so there is nothing to extend.

    orientation: ScrollbarOrientation
    propsThumb?: HTMLAttributes<HTMLElement>
    propsTouchThumb?: Partial<TouchThumbHandleProps>
    ref?: Ref<IScrollbarElement>

    Reference to the underling element

    renderScrollButtonEnd?: (props: ScrollButtonProps) => ReactElement
    renderScrollButtonStart?: (props: ScrollButtonProps) => ReactElement
    scrollButtonAdditionalRepeatDelay?: number
    scrollButtonIncrement?:
        | number
        | ((offset: number, viewport: number, totalSize: number) => number)

    The amount to increment the scroll position when the scroll button is clicked. This can be a fixed number or a function that takes the current offset, viewport size, and total size and returns the increment amount.

    scrollButtonInitialRepeatDelay?: number
    showCustomScrollButtons?: boolean

    Add custom scrollButtons. This should only be set to true if you have used css styling to hide the default scrollButtons using: ::-webkit-scrollbar-button: { display: 'none' }

    false
    totalSize: number
    viewportSize: number

    Settings
    Member Visibility

    On This Page
    Properties