组件

滚动区域

可通过键盘操作的局部滚动区域。

局部溢出

01Background

02Content

03Overlay

04Navigation

05Notifications

06Dialogs

07Tooltips

08Toasts

Tab to the region, then use the arrow keys.

创建滚动容器

将焦点移到任一实际滚动容器，再使用方向键。每个子元素仅沿演示的方向溢出。

DemoScrollArea 会渲染带有 tabIndex={0} 的 div.ui-scroll：在内凹区域中使用原生溢出滚动，高度上限为 16rem。可设置教学所需宽度或更小的高度；组件不会新增子元素，也不会改变滚动区域内的布局。

<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>

集合内容需要地标时，请为区域命名，并确保焦点轮廓清晰可见。