Capítulo 37 de 51
Wraps native scrolling (not a reimplementation) with a custom-styleable overlay scrollbar — content still scrolls natively via the real Viewport, so keyboard/wheel/touch scrolling and browser scroll-anchoring all keep working; v1.7.0 added WebKit overscroll feedback on the Thumb.
Root → Viewport → Content; Scrollbar → Thumb; Corner (for when both scrollbars are visible simultaneously).data-has-overflow-x/-y, data-overflow-x-start/-end, data-overflow-y-start/-end — style fade/shadow indicators at the edges where more content exists to scroll to, without manual scroll-position math.data-scrolling: present on Root/Viewport/Content/Thumb/Scrollbar while actively scrolling — the hook for auto-hiding scrollbar chrome except during active scroll.overflowEdgeThreshold (on Root): pixel tolerance before an edge is considered "no more overflow" — avoids edge-indicator flicker from sub-pixel rounding at scroll extremes.Scrollbar.orientation: vertical/horizontal, one Scrollbar+Thumb pair per axis needed.| Part | Notable props | Notable data attributes |
|---|---|---|
Root/Viewport/Content | overflowEdgeThreshold (Root only) | data-has-overflow-x/-y, data-overflow-{x,y}-{start,end}, data-scrolling |
Scrollbar | orientation, keepMounted | same overflow attrs + data-hovering |
Thumb | — | data-orientation, data-scrolling |
data-overflow-{x,y}-{start,end} rather than computing scroll position in JS — the component already tracks it.data-scrolling to auto-hide the custom scrollbar chrome when idle (the common "macOS-style" overlay scrollbar behavior) instead of a manual timeout-based show/hide.overflow: hidden hacks; style the Scrollbar/Thumb visuals only, the actual scroll mechanics are untouched.Lists use similar scroll-arrow (ScrollUpArrow/ScrollDownArrow) patterns for long option lists, a related but distinct mechanism from this general-purpose Scroll Area.