ScrollingFrame składa się z konfigurowalnego płótna i pasków przewijania z wbudowaną interaktywnością przewijania oraz różnymi sposobami dostosowania działania przewijania. ScrollingFrame jest idealny do wyświetlania dużej ilości informacji w ograniczonej przestrzeni i działa dobrze z układami listy oraz 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:
| Ustawienia ramki | Wynik |
|---|---|
| CanvasSize ramki jest wyższe niż jej całkowita wysokość; konkretnie całkowite CanvasSize.Y przekracza całkowite Size.Y. | Włączone jest przewijanie pionowe i pojawia się pionowy pasek przewijania. |
| CanvasSize ramki jest szersze niż jej całkowita szerokość; konkretnie całkowite CanvasSize.X przekracza całkowite Size.X. | Włączone jest przewijanie poziome i pojawia się poziomy pasek przewijania. |
| AutomaticCanvasSize ramki jest ustawione na Y lub XY, a całkowita wysokość jej zawartości (dzieci GuiObjects) przekracza całkowite Size.Y. | Włączone jest przewijanie pionowe i pojawia się pionowy pasek przewijania. |
| AutomaticCanvasSize ramki jest ustawione na X lub XY, a całkowita szerokość jej zawartości (dzieci GuiObjects) przekracza całkowite 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 efektu, jeśli paski przewijania nie są widoczne.
Wcięcia
Właściwość CanvasSize ramki przewijania może być wpływana przez właściwości VerticalScrollBarInset i/lub HorizontalScrollBarInset. W poniższym przykładzie diagramu, ramka przewijania pionowego używa szerokości płótna wynoszącej 100%. Przy VerticalScrollBarInset ustawionym na None (domyślnie), płótno rozciąga się na całą szerokość ramki przewijania, zasłaniając niewielką ilość zawartości pod paskiem przewijania. W przeciwieństwie do tego, ustawienie VerticalScrollBarInset na Always lub ScrollBar wciąć 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 przełącza pozycję paska na lewo lub prawo od płótna, ale poziome paski przewijania mogą być tylko umiejscowione 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ócone o 90° w lewo dla poziomego paska przewijania).
- MidImage — Rozciąga się na obszarze pomiędzy TopImage a BottomImage (obrócone 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ócone 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 nadają barwę zasobom obrazów paska i modyfikują jego przezroczystość, odpowiednio.
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 odbije się z powrotem do swojego minimalnego lub maksymalnego limitu. Jeśli chcesz całkowicie usunąć elastyczne zachowanie i zapewnić, że płótno nigdy nie przewija się poza swoje granice, ustaw właściwość ElasticBehavior na Never.