{"id":"e206997a-c6ce-4136-ab04-2cc79447a854","shortId":"7vRrZ8","kind":"skill","title":"scroll-areas","tagline":"Scroll areas inside a layout should be avoided wherever possible. When unavoidable, allow only one scroll axis at a time and always keep the user in control. Use when designing layouts, data tables, panels, or any component that might introduce an inner scroll container.","description":"# Scroll Areas\n\n## Avoid Scroll Areas by Default\n\nScroll 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.\n\n**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.\n\nAlternatives to inner scroll:\n- Pagination or load-more for long lists\n- Collapsible sections (accordion) for long detail panels\n- A separate page or route for content that would otherwise fill a scroll area\n- Progressive disclosure — show less by default, expand on demand\n\n## When a Scroll Area Is Justified\n\nSome layouts genuinely require inner scroll:\n\n- **Fixed-height sidebars** with navigation trees longer than the viewport\n- **Data tables** where the header must remain visible while rows scroll\n- **Chat or log panels** where the stream is continuous and the surrounding layout is fixed\n- **Code editors or terminal panes** embedded in a larger application shell\n\nIn these cases, proceed — but apply the constraints below.\n\n## One Axis Only\n\nNever 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.\n\n```css\n/* One axis: vertical */\noverflow-y: auto;\noverflow-x: hidden;\n\n/* One axis: horizontal (e.g. wide table) */\noverflow-x: auto;\noverflow-y: hidden;\n\n/* Never */\noverflow: auto; /* allows both axes */\n```\n\nIf content requires both axes — e.g. a wide table inside a constrained panel — restructure the layout so the table's horizontal scroll is the only scroll in the view, with the page itself not scrolling at that point.\n\n## Always User-Controlled\n\nScroll must never happen automatically without user intent. Specifically:\n\n- **No auto-scrolling** that moves the viewport without the user initiating it\n- **No scroll hijacking** — do not intercept the native scroll event to animate or pace it artificially\n- **Scroll-to on load** is acceptable only when restoring a previous scroll position (e.g. returning to a list after navigating away)\n- **Scroll-to for errors or anchors** is acceptable as a response to a user action (submitting a form with errors, clicking a table-of-contents link)\n\nException: chat and log panels may auto-scroll to the bottom on new content, but only if the user is already at the bottom. If the user has scrolled up to read, do not force them back down — show a \"new messages\" indicator instead.\n\n## Scroll Affordance\n\nUsers must be able to tell a region is scrollable before they attempt to scroll it.\n\n- Clip content visually at the edge — a partially visible item signals \"there is more\"\n- Use a subtle scrollbar (not `scrollbar-width: none`) so the track is visible\n- On touch, a partial item at the edge is the primary affordance — ensure the container does not have `overflow: hidden` on the trailing edge\n\n## Review Checklist\n\n- [ ] Is every inner scroll area genuinely necessary, or can the layout be restructured to use page scroll?\n- [ ] Does every scroll container scroll on one axis only?\n- [ ] Is `overflow: auto` (two-axis) avoided on all scroll containers?\n- [ ] Is scroll always user-initiated — no hijacking, no forced auto-scroll?\n- [ ] Is the scrollable region visually apparent (partial content, visible scrollbar)?\n- [ ] On touch devices, is scroll smooth and native (`-webkit-overflow-scrolling: touch` or equivalent)?","tags":["scroll","areas","dembrandt","skills","accessibility","agent-skills","claude-code-skills","claude-skills","cursor-skills","design-system","design-tokens","enterprise-ux"],"capabilities":["skill","source-dembrandt","skill-scroll-areas","topic-accessibility","topic-agent-skills","topic-claude-code-skills","topic-claude-skills","topic-cursor-skills","topic-design-system","topic-design-tokens","topic-enterprise-ux","topic-gestalt","topic-skills-sh","topic-typography","topic-ui-design"],"categories":["dembrandt-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/dembrandt/dembrandt-skills/scroll-areas","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add dembrandt/dembrandt-skills","source_repo":"https://github.com/dembrandt/dembrandt-skills","install_from":"skills.sh"}},"qualityScore":"0.454","qualityRationale":"deterministic score 0.45 from registry signals: · indexed on github topic:agent-skills · 9 github stars · SKILL.md body (3,662 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T19:08:28.298Z","embedding":null,"createdAt":"2026-05-18T13:14:03.537Z","updatedAt":"2026-05-18T19:08:28.298Z","lastSeenAt":"2026-05-18T19:08:28.298Z","tsv":"'abl':484 'accept':390,414 'accordion':145 'action':421 'afford':480,536 'allow':16,301 'alreadi':455 'altern':131 'alway':25,342,590 'anchor':412 'anim':379 'appar':606 'appli':238 'applic':231 'area':3,5,49,52,88,116,163,176,555 'artifici':383 'ask':117 'attempt':493 'auto':279,293,300,357,441,579,599 'auto-scrol':356,440,598 'automat':350 'avoid':11,50,583 'away':405 'axe':254,303,308 'axi':20,243,258,274,285,575,582 'back':471 'bottom':445,458 'case':235 'chat':207,435 'checklist':550 'click':427 'clip':497 'code':222 'collaps':143 'compon':40 'constrain':315 'constraint':240 'contain':47,56,249,539,571,587 'content':156,305,432,448,498,608 'context':84 'context-switch':83 'continu':215 'control':30,264,345 'creat':67,246 'css':272 'data':35,196 'default':54,93,169 'demand':172 'design':33 'detail':148 'devic':271,613 'disclosur':165 'discov':71 'discoveri':110 'disori':261 'drawer':61 'e.g':287,309,398 'edg':502,532,548 'editor':223 'embed':227 'ensur':537 'equival':625 'error':410,426 'event':377 'everi':552,569 'except':434 'expand':170 'fill':160 'fix':186,221 'fixed-height':185 'forc':469,597 'form':424 'friction':68 'genuin':181,556 'handl':128 'happen':349 'hard':262 'header':200 'height':187 'hidden':283,297,544 'hijack':370,595 'horizont':286,324 'independ':78 'indic':477 'initi':366,593 'inner':45,65,114,133,183,553 'insid':6,57,313 'instead':478 'intent':353 'intercept':373 'introduc':43,112 'item':506,529 'justifi':178 'keep':26 'larger':230 'layout':8,34,59,120,180,219,319,561 'less':167 'let':94 'level':102 'link':433 'list':142,402 'load':138,388 'load-mor':137 'log':209,437 'long':141,147 'longer':192 'manag':76 'may':439 'messag':476 'might':42 'modal':63 'move':360 'multipl':77 'must':70,201,347,482 'nativ':375,618 'navig':190,404 'near':267 'necessari':557 'never':245,298,348 'new':447,475 'none':519 'one':18,242,273,284,574 'otherwis':159 'overflow':66,130,277,281,291,295,299,543,578,621 'overflow-i':276,294 'overflow-x':280,290 'pace':381 'page':96,101,126,152,335,566 'page-level':100 'pagin':135 'pane':226 'panel':37,60,149,210,316,438 'partial':504,528,607 'point':341 'posit':80,397 'possibl':13 'precis':265 'previous':395 'primari':535 'proceed':236 'progress':164 'read':466 'region':74,488,604 'remain':202 'requir':108,182,306 'respons':417 'restor':393 'restructur':123,317,563 'return':399 'review':549 'rout':154 'row':205 'screen':92 'scroll':2,4,19,46,48,51,55,75,79,87,97,103,115,134,162,175,184,206,248,251,259,325,329,338,346,358,369,376,385,396,407,442,463,479,495,554,567,570,572,586,589,600,615,622 'scroll-area':1 'scroll-to':384,406 'scrollabl':490,603 'scrollbar':514,517,610 'scrollbar-width':516 'section':144 'separ':151 'shell':232 'show':166,473 'sidebar':188 'signal':507 'simultan':81,255 'singl':99 'skill' 'skill-scroll-areas' 'smooth':616 'source-dembrandt' 'specif':354 'stream':213 'submit':422 'subtl':513 'surround':218 'switch':85 'tabl':36,62,197,289,312,322,430 'table-of-cont':429 'tell':486 'termin':225 'time':23 'topic-accessibility' 'topic-agent-skills' 'topic-claude-code-skills' 'topic-claude-skills' 'topic-cursor-skills' 'topic-design-system' 'topic-design-tokens' 'topic-enterprise-ux' 'topic-gestalt' 'topic-skills-sh' 'topic-typography' 'topic-ui-design' 'touch':270,526,612,623 'track':522 'trail':547 'tree':191 'two':257,581 'two-axi':256,580 'unavoid':15 'understood':106 'univers':105 'unus':268 'use':31,511,565 'user':28,69,344,352,365,420,453,461,481,592 'user-control':343 'user-initi':591 'vertic':275 'view':332 'viewport':195,362 'visibl':203,505,524,609 'visual':499,605 'webkit':620 'webkit-overflow-scrol':619 'wherev':12 'whether':118 'wide':288,311 'width':518 'without':351,363 'would':158 'x':282,292 'y':278,296","prices":[{"id":"0f6213cb-2037-4556-a901-14c6a794b493","listingId":"e206997a-c6ce-4136-ab04-2cc79447a854","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"dembrandt","category":"dembrandt-skills","install_from":"skills.sh"},"createdAt":"2026-05-18T13:14:03.537Z"}],"sources":[{"listingId":"e206997a-c6ce-4136-ab04-2cc79447a854","source":"github","sourceId":"dembrandt/dembrandt-skills/scroll-areas","sourceUrl":"https://github.com/dembrandt/dembrandt-skills/tree/main/skills/scroll-areas","isPrimary":false,"firstSeenAt":"2026-05-18T13:14:03.537Z","lastSeenAt":"2026-05-18T19:08:28.298Z"}],"details":{"listingId":"e206997a-c6ce-4136-ab04-2cc79447a854","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"dembrandt","slug":"scroll-areas","github":{"repo":"dembrandt/dembrandt-skills","stars":9,"topics":["accessibility","agent-skills","claude-code-skills","claude-skills","cursor-skills","design-system","design-tokens","enterprise-ux","gestalt","skills-sh","typography","ui-design","ux","wcag"],"license":"mit","html_url":"https://github.com/dembrandt/dembrandt-skills","pushed_at":"2026-05-14T22:34:06Z","description":"UX and design system skills for AI agents based on 20 years of experience","skill_md_sha":"b76ec28012be0584cde5eceb80f6eecc7cfd6f97","skill_md_path":"skills/scroll-areas/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/dembrandt/dembrandt-skills/tree/main/skills/scroll-areas"},"layout":"multi","source":"github","category":"dembrandt-skills","frontmatter":{"name":"scroll-areas","description":"Scroll areas inside a layout should be avoided wherever possible. When unavoidable, allow only one scroll axis at a time and always keep the user in control. Use when designing layouts, data tables, panels, or any component that might introduce an inner scroll container."},"skills_sh_url":"https://skills.sh/dembrandt/dembrandt-skills/scroll-areas"},"updatedAt":"2026-05-18T19:08:28.298Z"}}