스크롤 막대는 사용자가 보고 있는 공간보다 큰 문서에서 현재 위치를 나타냅니다. 사용자는 스크롤 막대를 이용하여 창 영역을 위아래로 움직여 문서의 나머지 부분으로 이동할 수 있습니다.
사용자는 터치, 회전 휠 또는 터치패드를 사용하여 스크롤 막대와 상호 작용합니다. 스크롤 막대의 화살표를 탭하면 페이지 단위로 콘텐츠가 이동하는데, 이는 화면 높이와 동일한 증분입니다. 그러나 사용자가 (터치스크린 감도에 따라) 빠르게 스크롤하려고 손을 뻗으면 관성으로 인해 한 페이지 이상 스크롤될 수 있습니다. 스크롤을 시작하는 방식에 관계없이 스크롤 동작은 항상 특정 항목에 고정되어야 합니다.
해부
스크롤바는 위로 스크롤하기, 아래로 스크롤하기, 그리고 스크롤 진행 표시기로 구성됩니다. 스크롤 방향은 셰브론(Chevron) 기호를 사용하여 나타냅니다. 스크롤 진행 표시기는 선택적인 요소로, 페이지의 전체 콘텐츠 양 대비 현재 보이는 콘텐츠의 스크롤 위치를 보여줍니다.
2. 스크롤 진행 표시기
3. 스크롤 다운 기능
명세서
기본 탐색 메뉴가 스택형으로 표시되고 제어 막대가 최소화된 상태에서 스크롤 막대의 위치
앱 헤더만 있는 스크롤 막대 위치
앱 헤더 및 컨트롤 바와 함께 스크롤 막대의 위치를 지정하십시오.
앱 헤더와 확장된 컨트롤 바를 포함한 스크롤 막대 위치
앱 바/헤더 및 최소화된 제어 막대와 함께 스크롤 막대의 위치
앱 바/헤더에만 스크롤 막대 위치 지정
앱 헤더 및 컨트롤 바와 함께 스크롤 막대의 위치를 지정하십시오.
앱 헤더와 확장된 컨트롤 바를 포함한 스크롤 막대 위치
화면 높이가 짧을 때 스크롤 막대 위치
스크롤 진행률 표시기 (선택 사항)
스타일
색상
| 요소 | 색상(주간 모드) | 색상(야간 모드) |
|---|---|---|
| 기본 아이콘 - 활성 상태 | 하얀색 | 흰색 @ 88% |
| 기본 아이콘 - 비활성 상태 | 흰색 @ 56% | 흰색 @ 50% |
| 스크롤 진행 표시기 | 흰색 @ 16% | 흰색 @ 12% |
사이즈
| 요소 | 크기(dp) |
|---|---|
| 기본 아이콘 | 44 |
| 터치 타겟 | 76 |
| 스크롤 진행 표시기 너비 | 6 |
| 둥근 모서리 반경(R4) | 가득한 |
예시
