ScrollingFrame은 사용자 정의 가능한 캔버스와 스크롤 바로 구성되어 있으며, 내장된 스크롤 상호작용 및 스크롤 작동 방식을 사용자 정의하는 다양한 방법을 제공합니다. ScrollingFrame은 제한된 공간에서 많은 정보를 표시하는 데 적합하며, 목록 및 격자 레이아웃과 잘 작동합니다.
캔버스
캔버스는 ScrollingFrame의 주요 영역으로, 다른 GuiObjects를 포함할 수 있습니다. 스크롤 동작은 다음 시나리오에서 자동으로 조정됩니다:
| 프레임 설정 | 결과 |
|---|---|
| 프레임의 CanvasSize가 전체 높이보다 더 큽니다. 특히 총 CanvasSize.Y가 총 Size.Y를 초과합니다. | 수직 스크롤이 활성화되고 수직 스크롤 바가 나타납니다. |
| 프레임의 CanvasSize가 전체 너비보다 더 큽니다. 특히 총 CanvasSize.X가 총 Size.X를 초과합니다. | 수평 스크롤이 활성화되고 수평 스크롤 바가 나타납니다. |
| 프레임의 AutomaticCanvasSize가 Y 또는 XY로 설정되어 있고, 내용(하위 GuiObjects)의 총 높이가 총 Size.Y를 초과합니다. | 수직 스크롤이 활성화되고 수직 스크롤 바가 나타납니다. |
| 프레임의 AutomaticCanvasSize가 X 또는 XY로 설정되어 있고, 내용(하위 GuiObjects)의 총 너비가 총 Size.X를 초과합니다. | 수평 스크롤이 활성화되고 수평 스크롤 바가 나타납니다. |
CanvasPosition 속성은 캔버스의 현재 위치 오프셋을 픽셀 단위로 반영하며, 이에 따라 스크롤 바의 위치를 설정합니다. 스크롤 바가 보이지 않는 경우 이 속성은 아무 역할도 하지 않습니다.
인셋
스크롤 프레임의 CanvasSize는 VerticalScrollBarInset 및/또는 HorizontalScrollBarInset 속성의 영향을 받을 수 있습니다. 다음 예제 다이어그램에서, 수직으로 스크롤하는 프레임은 너비가 100%인 캔버스를 사용합니다. VerticalScrollBarInset가 None(기본값)으로 설정되면, 캔버스는 스크롤 프레임의 전체 너비로 확장되어 스크롤 바 아래의 내용을 약간 가립니다. 반대로, VerticalScrollBarInset가 Always 또는 ScrollBar로 설정되면, 캔버스는 ScrollBarThickness만큼 인셋되어 캔버스가 스크롤 바와 모서리에서 맞닿게 됩니다.
스크롤 바
프레임의 스크롤 바는 현재 캔버스 위치를 반영하고 자동 드래그-투-스크롤 상호작용을 제공합니다. 수직 스크롤 바의 경우, VerticalScrollBarPosition 속성은 바의 위치를 캔버스의 왼쪽 또는 오른쪽으로 전환하며, 수평 스크롤 바는 캔버스 아래에만 배치될 수 있습니다.
스크롤 바 구조는 세 가지 자산 속성으로 구성됩니다:
- TopImage — 수직 스크롤 바의 상단 또는 수평 스크롤 바의 왼쪽에 표시됩니다 (수평 스크롤 바의 경우 90° 반시계방향으로 회전).
- BottomImage — 수직 스크롤 바의 하단 또는 수평 스크롤 바의 오른쪽에 표시됩니다 (수평 스크롤 바의 경우 90° 반시계방향으로 회전).
각 이미지는 ScrollBarThickness 속성에 따라 스케일이 조정되며, 이는 수직 스크롤 바의 너비 또는 수평 스크롤 바의 높이를 변경합니다.
추가적인 시각적 수정은 ScrollBarImageColor3 및 ScrollBarImageTransparency 속성을 통해 이루어질 수 있으며, 이는 각각 바의 이미지 자산에 색조를 부여하고 불투명도를 수정합니다.
탄력성
기본적으로 ScrollingFrames는 터치 지원 장치에서 탄력적인 스크롤 동작을 나타냅니다. 즉, 사용자는 캔버스를 경계보다 약간 더 끌어낼 수 있으며, 놓으면 캔버스가 최소 또는 최대 한계로 튕겨 돌아갑니다. 탄력적 동작을 완전히 제거하고 캔버스가 한계를 넘지 않도록 하려면 ElasticBehavior 속성을 Never로 설정하십시오.