Scroll area
A clipped, rounded scroll container with themed overlay scrollbars.
Basic
The .scroll-area root is a rounded, clipped box. Its vanilla implementation is enhanced by OverlayScrollbars (data-stisla-scroll-area), which replaces the native bars with thin overlay handles painted from the --scroll-area-* knobs; that binding ships with the JS layer. Give it a fixed height and content beyond it scrolls; with the plugin active the handles fade in on interaction. These examples add a rim with border utilities.
Horizontal
Set data-stisla-scroll-area-overflow-y="hidden" for a track that scrolls along the x axis only. The card row stays one row at any width.
Both axes
A bounded box with content larger than its viewport scrolls in both directions. The two bars share the same skin.
Always visible
Pass data-stisla-scroll-area-auto-hide="never" for a bar that stays painted. Useful when the affordance is more important than the chrome budget.
Tinted
Override the handle vars in a parent scope to retune the bar paint to the surface's accent. The cascade scopes the change.
Events
stisla:scroll-area:destroyed fires on the root when the underlying OverlayScrollbars instance is torn down (the component is destroyed or unmounted). Use it to detach any consumer-side listeners or refs you held against the scroll area.
Customization
These variables retune the area and forward to the overlay scrollbars. Override on the root or any wrapper.
| Variable | Use |
|---|---|
--scroll-area-radius | Corner radius of the clipped box |
--scroll-area-bar-size | Scrollbar thickness |
--scroll-area-bar-padding | Inset of the bar from the edge |
--scroll-area-bar-radius | Handle corner radius |
--scroll-area-track-bg | Track background (transparent by default) |
--scroll-area-handle-bg / -handle-bg-hover / -handle-bg-active | Handle paint across states |
--scroll-area-handle-min-size | Minimum handle length |