컴포넌트

스크롤 영역

키보드로 접근할 수 있는 로컬 스크롤 영역입니다.

국소적인 넘침

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>

모음에 랜드마크가 필요하다면 영역에 이름을 붙이고 포커스 윤곽선을 보이게 유지하세요.