Scrollbar
Used to replace the browser's native scrollbar, providing a more consistent visual experience and powerful interaction control.
Basic Usage
Set the scrollbar height via the height attribute.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Basic Usage
Horizontal Scroll
When the content width exceeds the container width, a horizontal scrollbar will automatically appear.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
Horizontal Scroll
Max Height
Use max-height attribute to limit the maximum height.
1
2
3
Max Height
Use in Nuxt
The Scrollbar component fully supports Nuxt 3/4 SSR rendering. When used in a Nuxt project, the component is automatically imported and no manual registration is required.
Nuxt SSR Item 1
Nuxt SSR Item 2
Nuxt SSR Item 3
Nuxt SSR Item 4
Nuxt SSR Item 5
Nuxt SSR Item 6
Nuxt SSR Item 7
Nuxt SSR Item 8
Nuxt SSR Item 9
Nuxt SSR Item 10
Nuxt Usage
SSR Notes:
- ✅ Supports dynamic display of
heightandmax-height - ✅ The custom scrollbar is activated on the client side without affecting the server-side first-screen rendering
- ✅ Native scrollbar fallback mode (native) perfectly supports SSR
API
Props
| Attribute | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| height | Scrollbar height | string / number | — | — |
| max-height | Scrollbar max height | string / number | — | — |
| native | Whether to use native scrollbar | boolean | — | false |
| always | Scrollbar is always displayed | boolean | — | false |
| min-size | Minimum scrollbar size | number | — | 20 |
| view-class | Custom class for view | string | — | — |
| view-style | Custom style for view | string / object / array | — | — |
| noresize | Do not respond to container size changes | boolean | — | false |
| tag | Element tag for view | string | — | div |
| theme-overrides | Theme overrides | ComponentThemeVars | — | — |
Events
| Event Name | Description | Parameters |
|---|---|---|
| scroll | Scroll event | { scrollLeft, scrollTop } |
Slots
| Slot | Description | Slot Props |
|---|---|---|
default | Scrollable content. | None |
Methods
| Method Name | Description | Parameters |
|---|---|---|
| scrollTo | Scroll to specified position | (options: ScrollToOptions | number, y?: number) |
| setScrollTop | Set vertical scroll distance | (value: number) |
| setScrollLeft | Set horizontal scroll distance | (value: number) |
| update | Manually update scrollbar state | — |
Expose
| Name | Description | Type |
|---|---|---|
wrap | Reference to the actual scroll container element. | HTMLDivElement | undefined |
update | Manually refresh scrollbar state. | () => void |
scrollTo | Scroll to a specific position. | (arg1: ScrollbarScrollToArg, arg2?: number) => void |
setScrollTop | Set the vertical scroll offset. | (value: number) => void |
setScrollLeft | Set the horizontal scroll offset. | (value: number) => void |
Theme Variables
Scrollbar component supports customizing local styles by overriding the following CSS variables:
| Variable | Description | Default |
|---|---|---|
--yh-scrollbar-width | Scrollbar width | 6px |
--yh-scrollbar-thumb-color | Thumb color | #c0c4cc |
--yh-scrollbar-thumb-hover-color | Thumb hover color | #909399 |
--yh-scrollbar-track-color | Track color | transparent |
--yh-scrollbar-thumb-radius | Thumb radius | 3px |
Type Exports
| Name | Description |
|---|---|
YhScrollbarProps | Component props type |
YhScrollbarEmits | Component emits type |
YhScrollbarSlots | Component slots type |
YhScrollbarExpose | Component expose type |
YhScrollbarScrollPayload | Scroll event payload type |
YhScrollbarScrollToArg | scrollTo argument type |
YhScrollbarInstance | Component instance type |