scroll-areaslisted

# Scroll Areas ## Avoid Scroll Areas by Default Scroll containers inside a layout — panels, drawers, tables, modals with inner overflow — create friction. Users must discover that a region scrolls, manage multiple independent scroll positions simultaneously, and context-switch between scroll areas on the same screen. **Default: let the page scroll.** A single page-level scroll is universally understood and requires no discovery. Before introducing an inner scroll area, ask whether the layout can be restructured so the page itself handles the overflow. Alternatives to inner scroll: - Pagination or load-more for long lists - Collapsible sections (accordion) for long detail panels - A separate page or route for content that would otherwise fill a scroll area - Progressive disclosure — show less by default, expand on demand ## When a Scroll Area Is Justified Some layouts genuinely require inner scroll: - **Fixed-height sidebars** with navigation trees longer than the viewport - **Data tables** where the header must remain visible while rows scroll - **Chat or log panels** where the stream is continuous and the surrounding layout is fixed - **Code editors or terminal panes** embedded in a larger application shell In these cases, proceed — but apply the constraints below. ## One Axis Only Never create a scroll container that scrolls on both axes simultaneously. Two-axis scroll is disorienting, hard to control precisely, and nearly unusable on touch devices. ```css /* One