Scroll Area

A <div> with native overflow-y: auto.scrollbar-gutter: stable reserves the scrollbar's space up front, so content doesn't shift by a few pixels when a scrollbar appears or disappears. The scrollbar's colours are restyled with scrollbar-color/scrollbar-width and the WebKit scrollbar pseudo-elements, as a cosmetic layer on top of real, native scrolling, never a replacement for it.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18

Playground

Toggle every adjustable prop and watch the component — and the code — update live.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18

Unstyled

Same component — Kernel look stripped. See Platforms.

max block size

edge shadow

Usage

<ScrollArea maxBlockSize="12rem" edgeShadow={true}>
  <ul>
    {items.map((item) => (
      <li key={item}>{item}</li>
    ))}
  </ul>
</ScrollArea>

<kernel-scroll-area max-block-size="12rem" edge-shadow>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</kernel-scroll-area>

Props

Props for Scroll Area.
Prop	Type	Default
`maxBlockSize`	string	—
`edgeShadow`	boolean	false

edgeShadow soft-fades content into the host surface and draws a layered inset shadow at whichever edge still has content to scroll toward — top, bottom, or both — then hides both again once that edge is scrolled into view. It tracks scroll position rather than the scroll gesture itself, so it never cuts off mid-scroll the moment your finger or wheel stops.

Accessibility

A native overflow container is already keyboard-scrollable once focused, nothing extra to wire up.
edgeShadow's transition respects prefers-reduced-motion.