ScrollArea
A container that wraps content and takes over the scrollbar appearance: a thin custom scrollbar that thickens on hover; with auto-hide it is only shown while scrolling or hovering, and scroll events are throttled.
Basic usage
height fixes the viewport height and content that overflows scrolls vertically; the scrollbar renders as a thin bar that thickens on hover.
Fixed-height scrolling
Line 1: ScrollArea supports a custom scrollbar appearance
Line 2: thin bar that thickens on hover
Line 3: scroll events throttled into oas-scroll
Line 4: smooth wheel scrolling
Line 5: auto-hide supported
Line 6: horizontal content also gets the custom scrollbar
Line 7: colors use theme tokens
Line 8: great for lists, logs and long text
Line 9: no scrollbar when content fits
Line 10: custom content slot
Width and horizontal scrolling
width fixes the viewport width; wide content produces a horizontal scrollbar.
Horizontal scrolling
auto-hide
With auto-hide the scrollbar is hidden normally and only appears while scrolling or hovering the viewport, then fades out automatically after stopping.
auto-hide
Scroll to see the scrollbar: hidden normally, shown while scrolling
Stop for a second and the scrollbar fades out automatically
Hovering over the area also shows it temporarily
Great for UIs where a scrollbar would distract from reading
Recommended for mobile card lists
Scroll event
Scroll events are throttled with rAF and fire oas-scroll; detail carries { scrollTop, scrollLeft }.
oas-scroll event
Line 1: scroll events throttled
Line 2: detail carries scrollTop / scrollLeft
Line 3: great for scroll listeners and lazy loading
Line 4: complements virtual-list scrolling
Line 5: scrollbar position stays in sync
Line 6: keep scrolling to see the output
Line 7: throttling avoids high-frequency events
Line 8: the last example
scrollTop: 0
API
Attributes
| Attribute | Description | Type | Default |
|---|---|---|---|
auto-hide | The scrollbar is shown only while scrolling/hovering, then auto-hides after a timeout | boolean | — |
height | Viewport height (px); when unset, grows with the content | — | — |
width | Viewport width (px); when unset, fills the host width | — | — |
Events
| Event | Description |
|---|---|
oas-scroll | Scroll event (rAF-throttled), detail: { scrollTop, scrollLeft } |
Slots
| Name | Description |
|---|---|
| default | — |
Parts: ::part(viewport) is the scrolling viewport, ::part(track-v) / ::part(track-h) are the scroll tracks, ::part(thumb-v) / ::part(thumb-h) are the scroll thumbs. The viewport is focusable (tabindex="0") and scrolls with arrow keys.