Composite
Scroll Area Hybrid
A scrollable region with branded thin scrollbars on platforms that support custom styling. For lists inside menus, sidebars inside dialogs, anywhere the scrollbar would otherwise be ugly or oversized.
About
Overview
Native scrollbars look fine on macOS (where they're auto-hidden) but stand out on Windows and Linux. ScrollArea provides a thin, branded scrollbar that matches the design system on every platform. Use it inside containers — never on the document root, where the platform default belongs.
Don't replace the page-level scrollbar. The browser's main scrollbar is part of the platform. Custom scrollbars belong inside scrollable containers, not around the whole document.
Live
Demo
Item 1 — Lorem ipsum dolor sit amet.
Item 2 — Consectetur adipiscing elit.
Item 3 — Sed do eiusmod tempor incididunt ut labore.
Item 4 — Ut enim ad minim veniam.
Item 5 — Quis nostrud exercitation ullamco laboris.
Item 6 — Nisi ut aliquip ex ea commodo consequat.
Item 7 — Duis aute irure dolor in reprehenderit.
Item 8 — In voluptate velit esse cillum dolore.
Item 9 — Eu fugiat nulla pariatur.
Item 10 — Excepteur sint occaecat cupidatat non proident.
<div class="ren-scroll-area" style="height: 200px;">
<!-- Tall content -->
</div>Reference
API
| Class | Effect |
|---|---|
.ren-scroll-area | Apply on any container with overflow-y: auto (or overflow-x). Sets a thin scrollbar styled with system colors. |
The class adjusts scrollbar-width and ::-webkit-scrollbar consistently. No JavaScript needed.
Inclusive by default
Accessibility
- Native scrolling — keyboard, mouse wheel, touch, and screen-reader gestures all work without extra wiring.
- Mark scrollable regions with
tabindex="0"when they don't already have a focusable child, so keyboard users can scroll with arrow keys. - Don't hide the scrollbar entirely — it's the only visual hint that more content exists.