コンポーネント

スクロール領域

キーボードでアクセスできる局所的なスクロール領域。

局所的なはみ出し

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>

コレクションにランドマークが必要なら領域に名前を付け、フォーカスの輪郭を見える状態に保ちます。