元件

捲動區域

可透過鍵盤操作的局部捲動區域。

局部溢位

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>

集合內容需要地標時，請為區域命名，並確保焦點外框清楚可見。