Design system · Component review 13

Demo scroll area

A bounded collection should make it obvious where wheel and keyboard scrolling will stay. The scene keeps the original neutral stripes and puts the scroll boundary around the same six layer rows.

Adopted default: the shared DemoScrollArea now marks the native scroll boundary with a fine edge and a quiet surface. Focus either shared collection and use Arrow Down or Page Down; the page itself should stay still while the focused region scrolls.

Local vertical scrolling

Each region has the same content and an explicit height. The border treatment should help identify the actual scrollport, not change the lesson’s overflow property.

01

Original Guide

Plain scrollable content

01Background
02Composition
03Typography
04Annotations
05Export
06Delivery

The original Guide has no dedicated scroll-area primitive. This shows its existing striped Demo around a native overflow region.

02

Previous

Shared DemoScrollArea

01Background
02Composition
03Typography
04Annotations
05Export
06Delivery

The previous component bounded overflow and was keyboard-focusable, but its edge was hard to distinguish from the striped canvas.

03

Adopted

Clear local scroll boundary

01Background
02Composition
03Typography
04Annotations
05Export
06Delivery

A fine border, small radius and restrained inset surface make the focus and scroll boundary visible without changing the content layout.

Actual Reference use

The overflow reference shows separate vertical and horizontal scroll containers with true CSS utility classes.

Open /reference/overflow
Create a scroll container
Focus either real scroll container and use the arrow keys. Each child overflows only along the direction being demonstrated.

The Reference remains responsible for its own scroll geometry. Shared decoration must never add a child that changes which element actually scrolls.