Components / Layout & Navigation / Scroll Area

Scroll Area beta

A long list in a fixed frame, with a scrollbar that matches the room and a fade that admits there is more.

Preview

Nov 1v2.20.0 — New: Date Picker and Combobox join the set.

Oct 28v2.19.0 — Blocks: Use Cases and Integrations.

Oct 24v2.18.0 — Data Table sorts; Tree folds.

Oct 19v2.17.2 — Fix: MPEG-TS cuts keep their video stream.

Oct 12v2.17.0 — File Upload and Tag Input.

Oct 5v2.16.0 — Context Menu, written as a component.

Sep 28v2.15.0 — The mold check learns the class-coverage rule.

Sep 20v2.14.0 — Themes ship: five accents, one command.

<div class="k-scroll" style="max-width:400px">
  <div class="k-scroll-in" tabindex="0" aria-label="Release notes">
    <div class="rl"><time>Nov 1</time><span><b>v2.20.0</b> — New: Date Picker and Combobox join the set.</span></div><div class="rl"><time>Oct 28</time><span><b>v2.19.0</b> — Blocks: Use Cases and Integrations.</span></div><div class="rl"><time>Oct 24</time><span><b>v2.18.0</b> — Data Table sorts; Tree folds.</span></div><div class="rl"><time>Oct 19</time><span><b>v2.17.2</b> — Fix: MPEG-TS cuts keep their video stream.</span></div><div class="rl"><time>Oct 12</time><span><b>v2.17.0</b> — File Upload and Tag Input.</span></div><div class="rl"><time>Oct 5</time><span><b>v2.16.0</b> — Context Menu, written as a component.</span></div><div class="rl"><time>Sep 28</time><span><b>v2.15.0</b> — The mold check learns the class-coverage rule.</span></div><div class="rl"><time>Sep 20</time><span><b>v2.14.0</b> — Themes ship: five accents, one command.</span></div>
  </div>
</div>

.k-scroll{position:relative;font-family:var(--k-font);text-align:left;color:var(--k-ink)}
.k-scroll-in{max-height:216px;overflow-y:auto;padding-right:6px;scrollbar-width:thin;scrollbar-color:var(--k-border-strong) transparent}
.k-scroll-in::-webkit-scrollbar{width:8px}
.k-scroll-in::-webkit-scrollbar-thumb{background:var(--k-border-strong);border-radius:99px}
.k-scroll-in::-webkit-scrollbar-track{background:transparent}
.k-scroll::after{content:"";position:absolute;left:0;right:10px;bottom:0;height:34px;background:linear-gradient(transparent,var(--k-bg));pointer-events:none}
.k-scroll .rl{display:flex;gap:10px;padding:9px 8px;border-radius:9px;font-size:13px;align-items:baseline}
.k-scroll .rl:hover{background:var(--k-bg-soft)}
.k-scroll .rl time{font-family:var(--k-mono);font-size:11px;color:var(--k-ink-3);flex:none}
.k-scroll .rl b{font-weight:550}

Usage

For sidebars, logs and pickers that must not push the page around. If the content is the page, let the page scroll — this is for regions inside it.

Accessibility

Native scrolling throughout: keyboard, wheel and touch all work because nothing is faked. The custom styling is paint only.

Related parts

Accordion beta

Disclosure built on native <details>. Zero JavaScript, keyboard and find-in-page included.

disclosuredetailsfaqno-js

Breadcrumbs beta

Where you are, as a path. The last crumb is the page itself — not a link.

navigationpathhierarchy

Pagination beta

Page numbers with a clear current page: ink-filled, everything else quiet.

navigationpageslist

Separator beta

A hairline that divides without decorating. Plain, labelled, and vertical forms.

dividerrulehr

Pagination

Separator