ScrollingFrame składa się z dostosowywalnego płótna i pasków przewijania z wbudowaną interaktywnością przewijania oraz różnymi sposobami dostosowywania działania przewijania. ScrollingFrame jest idealny do wyświetlania dużej ilości informacji w ograniczonej przestrzeni i dobrze współpracuje z układami list i siatki.
Płótno
Płótno to główny obszar ScrollingFrame, który może zawierać inne GuiObjects. Zachowanie przewijania automatycznie dostosowuje się w następujących scenariuszach:
| Ustawienie ramki | Wynik |
|---|---|
| Rozmiar CanvasSize ramki jest wyższy niż jej całkowita wysokość; konkretnie całkowity CanvasSize.Y przekracza całkowity Size.Y. | Włączone jest przewijanie pionowe i pojawia się pionowy pasek przewijania. |
| Rozmiar CanvasSize ramki jest szerszy niż jej całkowita szerokość; konkretnie całkowity CanvasSize.X przekracza całkowity Size.X. | Włączone jest przewijanie poziome i pojawia się poziomy pasek przewijania. |
| Ustawienie AutomaticCanvasSize ramki jest ustawione na Y lub XY i całkowita wysokość jej zawartości (dzieci GuiObjects) przekracza całkowity Size.Y. | Włączone jest przewijanie pionowe i pojawia się pionowy pasek przewijania. |
| Ustawienie AutomaticCanvasSize ramki jest ustawione na X lub XY i całkowita szerokość jej zawartości (dzieci GuiObjects) przekracza całkowity Size.X. | Włączone jest przewijanie poziome i pojawia się poziomy pasek przewijania. |
Właściwość CanvasPosition odzwierciedla aktualny przesunięcie pozycyjne płótna w obrębie ramki, w pikselach, i odpowiednio ustawia pozycję pasków przewijania. Należy pamiętać, że ta właściwość nie ma żadnego wpływu, jeśli paski przewijania nie są widoczne.
Wcięcia
Rozmiar CanvasSize przewijanej ramki może być wpływany przez właściwości VerticalScrollBarInset i/lub HorizontalScrollBarInset. W poniższym przykładzie diagramu, pionowo przewijana ramka używa szerokości płótna wynoszącej 100%. Przy ustawieniu VerticalScrollBarInset na None (domyślnie), płótno rozciąga się na pełną szerokość ramki przewijanej, zasłaniając niewielką ilość zawartości pod paskiem przewijania. W przeciwieństwie do tego, ustawienie VerticalScrollBarInset na Always lub ScrollBar wcięża płótno o wartość ScrollBarThickness, aby płótno stykało się krawędzią z krawędzią z paskiem przewijania.
Paski przewijania
Paski przewijania ramki odzwierciedlają aktualną pozycję płótna i zapewniają automatyczną interaktywność przeciągania do przewijania. Dla pionowych pasków przewijania, właściwość VerticalScrollBarPosition zmienia pozycję paska na lewą lub prawą stronę płótna, ale poziome paski przewijania mogą być umieszczone tylko poniżej płótna.
Budowa paska przewijania składa się z trzech właściwości zasobów:
- TopImage — Wyświetla się na górze pionowego paska przewijania lub po lewej stronie poziomego paska przewijania (obrócony o 90° w lewo dla poziomego paska przewijania).
- MidImage — Rozciąga się na obszarze między TopImage a BottomImage (obrócony o 90° w lewo dla poziomego paska przewijania).
- BottomImage — Wyświetla się na dole pionowego paska przewijania lub po prawej stronie poziomego paska przewijania (obrócony o 90° w lewo dla poziomego paska przewijania).
Każdy obrazek skaluje się na podstawie właściwości ScrollBarThickness, która zmienia szerokość pionowego paska przewijania lub wysokość poziomego paska przewijania.
Dodatkowe modyfikacje wizualne można wprowadzić za pomocą właściwości ScrollBarImageColor3 i ScrollBarImageTransparency, które odpowiednio barwią zasoby obrazów paska i modyfikują jego przezroczystość.
Przycinanie
By default, GuiObject containers clip their content (descendant GuiObjects) through the ClipsDescendants boolean. If you want descendants to appear outside of a container's bounds, simply set ClipsDescendants to false.
Importantly, StarterGui.ClipsDescendantsSupportsRotation must be true for clipping to work on rotated descendants (non‑zero Rotation) within the container. However, clipping by a rotated container (clipping container itself is rotated) or by rounded corners (UICorner) is not supported. If you need clipping on rotated or rounded containers, consider CanvasGroup.
Rotation = 0
Rotation = 10
Elastyczność
Domyślnie ScrollingFrames wykazują elastyczne zachowanie przewijania na urządzeniach z obsługą dotyku, co oznacza, że użytkownicy mogą przeciągnąć płótno nieco dalej niż jego granice, a po zwolnieniu płótno wróci do swojego minimalnego lub maksymalnego limitu. Jeśli chcesz całkowicie usunąć elastyczne zachowanie i upewnić się, że płótno nigdy nie przewija się poza swoje granice, ustaw właściwość ElasticBehavior na Never.