Theme:
Ui3nScrollbarHorizontal
Horizontal scrollbar component with customizable appearance and behavior.
Props
| Name | Type | Default | Description |
|---|---|---|---|
thumbMinWidth | string | number | undefined | MIN_WIDTH | No description provided |
thumbWidth | string | number | undefined | "auto" | No description provided |
thumbRadius | string | number | undefined | — | No description provided |
thumbColor | string | undefined | — | No description provided |
thumbHoverColor | string | undefined | — | No description provided |
thumbActiveColor | string | undefined | — | No description provided |
trackHeight | string | number | undefined | — | No description provided |
trackRadius | string | number | undefined | — | No description provided |
trackColor | string | undefined | — | No description provided |
Events
| Event Name | Arguments / Value Type | Description |
|---|---|---|
scroll | value: Event | — |
Slots
| Slot Name | Scope Props (v-slot) | Description |
|---|---|---|
#default | — | — |
Public Methods & Exposes
| Method Name | Signature / Type | Description |
|---|---|---|
scrollTo() | (options: ScrollToOptions) => void | — |
getContainer() | () => HTMLDivElement | — |
CSS Variables
Set any of these where you need it — on :root, on a container, or on the element itself through [data-ui3n] — and the component follows. Leave them alone and it uses the defaults below.
| Name | Default |
|---|---|
--ui3n-scrollbar-horizontal-thumb-active-color | var(--color-bg-control-accent-focused) |
--ui3n-scrollbar-horizontal-thumb-color | var(--color-bg-control-accent-default) |
--ui3n-scrollbar-horizontal-thumb-hover-color | var(--color-bg-control-accent-hover) |
--ui3n-scrollbar-horizontal-thumb-radius | 4px |
--ui3n-scrollbar-horizontal-track-color | transparent |
--ui3n-scrollbar-horizontal-track-height | 6px |
--ui3n-scrollbar-horizontal-track-radius | 4px |
Usage Examples
Simple horizontal scrollbar
Simple horizontal scrollbar
Basic horizontal scrollbar with content
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
Custom styled scrollbar
Custom styled scrollbar
Scrollbar with custom colors and dimensions
Card 1
Card 2
Card 3
Card 4
Card 5
Card 6
Card 7
Card 8
Card 9
Card 10
Card 11
Card 12
Card 13
Card 14
Card 15
Card 16
Card 17
Card 18
Card 19
Card 20
Card 21
Card 22
Card 23
Card 24
Card 25
Card 26
Card 27
Card 28
Card 29
Card 30