Components

Scroll region

Overflow stays local inside a sunken well with a focus stop. The page does not scroll with it.

Local overflow

01Background

02Content

03Overlay

04Navigation

05Notifications

06Dialogs

07Tooltips

08Toasts

Tab to the region, then use the arrow keys.

In a reference specimen

Create a scroll container

Focus either real scroll container and use the arrow keys. Each child overflows only along the direction being demonstrated.

Used on the layout verification guide.

Usage and interface

DemoScrollArea renders div.ui-scroll with tabIndex={0}: native overflow in a sunken well, capped at 16rem high. Set the lesson's width or a smaller height; it adds no child and does not change the layout inside the scrollport.

<DemoScrollArea role="region" aria-label="Layer collection" className="(height:10rem)">  {/* Overflowing content */}</DemoScrollArea>

<div class="ui-scroll" tabindex="0" role="region" aria-label="Layer collection">…</div>

Name the region when the collection needs a landmark, and keep the focus outline visible.