EOS UIComponents
Scrollbar
A framework-agnostic custom scrollbar that can attach to any scrollable container.
Import
import '@eosjs/ui/scrollbar';Introduction
Scrollbar provides a consistent custom track and thumb for horizontal or vertical scrolling. Attach it to a native scroll container to keep the thumb synchronized, or drive it manually for virtualized content.
Basic Usage
Basic usage
Scrollable content / 01
Scrollable content / 02
Scrollable content / 03
Scrollable content / 04
Scrollable content / 05
Scrollable content / 06
Scrollable content / 07
Scrollable content / 08
API
Generated from custom-elements.json for eos-scrollbar.
Attributes
| Name | Type | Default | Description |
|---|---|---|---|
direction | — | — | — |
auto-hide | — | — | — |
thumb-color | — | — | — |
track-color | — | — | — |
thumb-size | — | — | — |
thumb-min-size | — | — | — |
border-radius | — | — | — |
Events
| Name | Type | Description |
|---|---|---|
scroll-change | CustomEvent | — |
Methods
| Name | Signature | Description |
|---|---|---|
attach | — | 绑定到一个可滚动的 DOM 元素，自动同步滚动位置 |
detach | — | 解除与目标元素的绑定 |
setVirtualScroll | — | 虚拟列表模式：手动设置滚动状态。 适用于虚拟列表/虚拟滚动场景，DOM 实际高度与逻辑内容高度不一致时使用。 |
clearVirtualScroll | — | 退出虚拟列表模式，恢复为自动从 DOM 同步 |
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
direction | horizontal | vertical | horizontal | Scroll direction |
auto-hide | boolean | false | Fade out when the scrollbar is idle |
thumb-color | string | var(--eos-color-foreground-muted) | Thumb color |
track-color | string | var(--eos-color-border) | Track color |
thumb-size | string | 6 | Thumb thickness in pixels |
thumb-min-size | string | 30 | Minimum thumb length in pixels |
border-radius | string | 3 | Track and thumb radius in pixels |
Methods
| Method | Description |
|---|---|
attach(element) | Bind to a scrollable element |
detach() | Remove the current binding |
setVirtualScroll(options) | Set a virtual content size, viewport size, and offset |
clearVirtualScroll() | Return to DOM-driven scrolling |
const scrollbar = document.querySelector('eos-scrollbar');
scrollbar.setVirtualScroll({
contentSize: 100000,
viewportSize: 600,
scrollOffset: 1200,
});Events
| Event | When it fires | event.detail |
|---|---|---|
scroll-change | The scroll position changes | { position, ratio, scrollOffset? } |
Slots
Scrollbar has no content slots. Place it adjacent to the scroll container it controls and call attach(element) after both elements are connected.