Control the visibility and appearance of the vertical scrollbar.
| Property | Type | Default | Description |
|---|---|---|---|
visibility | "always" | "hover" | "panning" | "never" | "hover" | When the scrollbar is visible. |
color | string | "rgba(128,128,128,0.5)" | Colour of the scrollbar thumb and track. |
The scrollbar appears only when the timeline content overflows vertically. The visibility setting controls when it is shown:
"always" — visible whenever there is overflow."hover" — visible when the pointer is over the timeline or during panning."panning" — visible only while actively panning."never" — never shown.const timeline = new TempisTimeline('#canvas', {
responsive: true,
scrollbar: {
visibility: 'always',
color: 'rgba(99, 102, 241, 0.4)'
},
items: [
{ id: 1, label: 'Item 1', start: '2026-01-01', end: '2026-01-10', grouping: 'Group 1' },
{ id: 2, label: 'Item 2', start: '2026-01-05', end: '2026-01-15', grouping: 'Group 2' },
{ id: 3, label: 'Item 3', start: '2026-01-08', end: '2026-01-20', grouping: 'Group 3' },
{ id: 4, label: 'Item 4', start: '2026-01-12', end: '2026-01-25', grouping: 'Group 4' },
],
range: { start: '2026-01-01', end: '2026-02-01', position: 'bottom' }
});