KScrollableContainer
示例
Scrollable Container
Item 1 — Scrollable content row
Item 2 — Scrollable content row
Item 3 — Scrollable content row
Item 4 — Scrollable content row
Item 5 — Scrollable content row
Item 6 — Scrollable content row
Item 7 — Scrollable content row
Item 8 — Scrollable content row
Item 9 — Scrollable content row
Item 10 — Scrollable content row
Item 11 — Scrollable content row
Item 12 — Scrollable content row
Item 13 — Scrollable content row
Item 14 — Scrollable content row
Item 15 — Scrollable content row
Item 16 — Scrollable content row
Item 17 — Scrollable content row
Item 18 — Scrollable content row
Item 19 — Scrollable content row
Item 20 — Scrollable content row
Item 21 — Scrollable content row
Item 22 — Scrollable content row
Item 23 — Scrollable content row
Item 24 — Scrollable content row
Item 25 — Scrollable content row
Item 26 — Scrollable content row
Item 27 — Scrollable content row
Item 28 — Scrollable content row
Item 29 — Scrollable content row
Item 30 — Scrollable content row
A scrollable container with a configurable max height and a bottom fade gradient indicator.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| maxHeight | string | '400px' | Maximum height of the scrollable area (CSS value). |
| class | string | — | Additional CSS classes for the container. |
| theme | 'auto' | 'day' | 'night' | 'auto' | Theme mode. auto follows the current theme; day and night force a specific mode. |
Emits
| Name | Parameters | Description |
|---|---|---|
| — | — | This component does not emit custom events. |
Slots
| Name | Description |
|---|---|
| default | Content to render inside the scrollable area. |
Exposed Methods
| Name | Returns | Description |
|---|---|---|
| scrollToTop | void | Smoothly scrolls to the top of the container. |
| scrollToBottom | void | Smoothly scrolls to the bottom of the container. |
| getScrollInfo | { scrollTop, scrollHeight, clientHeight, isAtBottom, isAtTop } | Returns current scroll state information. |
Basic Usage
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
Item 21
Item 22
Item 23
Item 24
Item 25
Item 26
Item 27
Item 28
Item 29
Item 30
Item 31
Item 32
Item 33
Item 34
Item 35
Item 36
Item 37
Item 38
Item 39
Item 40
Item 41
Item 42
Item 43
Item 44
Item 45
Item 46
Item 47
Item 48
Item 49
Item 50