Canvas Timeline
Function

useTimelineViewportScrollbar

Adapts generic range scrollbar state to the current timeline viewport. The hook derives a controlled `{ start, end }` value from timeline `scrollLeft`, `zoomScale`, `viewportWidth`, and content duration. Thumb changes pan the engine, while handle changes update zoom and then restore the requested range start.

Signature

Type Definition
useTimelineViewportScrollbar(options: UseTimelineViewportScrollbarOptions = {}): UseTimelineViewportScrollbarResult

Parameters

NameTypeDescription
optionsUseTimelineViewportScrollbarOptionsTimeline viewport range options.

Returns

UseTimelineViewportScrollbarResult

Timeline viewport metrics plus `RangeScrollbar.Root` control props.

Examples

tsx Example
const viewportScrollbar = useTimelineViewportScrollbar();


return (
  <RangeScrollbar.Root {...viewportScrollbar.rootProps}>
    <RangeScrollbar.Thumb>
      <RangeScrollbar.Handle side="start" />
      <RangeScrollbar.Handle side="end" />
    </RangeScrollbar.Thumb>
  </RangeScrollbar.Root>
);