Chapter 28: Scroll Area

Core Idea

Cross-browser custom-styled scrollbars over genuinely native scrolling — the scrollbar overlays content (taking no layout space) while actual scroll physics/keyboard behavior stay native, unlike JS-position-transform scroll libraries.

Key Concepts

• Anatomy: Root → Viewport (the scrollable content container) + Scrollbar (one per axis, orientation="vertical"/"horizontal") → Thumb, plus Corner where both scrollbars meet.
• type (default "hover"): controls scrollbar visibility behavior — options typically range from always-visible to hover/scroll-triggered, auto-hiding after scrollHideDelay.
• Native scrolling preserved: only pointer interaction with the custom scrollbar controls is intercepted; keyboard scrolling and native scroll behavior are untouched.
• [data-state] on Scrollbar/Thumb: "visible" | "hidden" — drives fade-in/out styling for auto-hiding scrollbars.

Key Takeaways

1. Prefer plain native scrolling + CSS (scrollbar-width, ::-webkit-scrollbar) first — reach for ScrollArea specifically when you need truly cross-browser custom-styled scrollbars that plain CSS can't achieve consistently.
2. Because scroll behavior itself stays native, keyboard scrolling and accessibility are preserved automatically — you're only responsible for styling Scrollbar/Thumb/Corner.
3. Add a second Scrollbar with orientation="horizontal" to support both axes; Corner fills the gap where they intersect.

Connects To

• Select: uses the same overlay-scrollbar approach internally for its scrollable option list.