Een ScrollingFrame bestaat uit een aanpasbaar canvas en scrollbalken met ingebouwde scrollinteractiviteit en verschillende manieren om aan te passen hoe de scrolling werkt. ScrollingFrame is ideaal voor het weergeven van veel informatie in een beperkte ruimte en werkt goed met lijst en rooster lay-outs.
Canvas
Het canvas is het primaire gebied van een ScrollingFrame dat andere GuiObjects kan bevatten. Het scrollgedrag past zich automatisch aan in de volgende scenario's:
| Frame-instelling | Resultaat |
|---|---|
| De CanvasSize van het frame is hoger dan de totale hoogte; specifiek de totale CanvasSize.Y overschrijdt de totale Size.Y. | Verticale scrolling is ingeschakeld en er verschijnt een verticale scrollbalk. |
| De CanvasSize van het frame is breder dan de totale breedte; specifiek de totale CanvasSize.X overschrijdt de totale Size.X. | Horizontale scrolling is ingeschakeld en er verschijnt een horizontale scrollbalk. |
| De AutomaticCanvasSize van het frame is ingesteld op Y of XY en de totale hoogte van de inhoud (kind GuiObjects) overschrijdt de totale Size.Y. | Verticale scrolling is ingeschakeld en er verschijnt een verticale scrollbalk. |
| De AutomaticCanvasSize van het frame is ingesteld op X of XY en de totale breedte van de inhoud (kind GuiObjects) overschrijdt de totale Size.X. | Horizontale scrolling is ingeschakeld en er verschijnt een horizontale scrollbalk. |
De CanvasPosition eigenschap weerspiegelt de huidige positionele offset van het canvas binnen het frame, in pixels, en stelt de positie van de scrollbalken dienovereenkomstig in. Let op dat deze eigenschap niets doet als scrollbalken niet zichtbaar zijn.
Insets
De CanvasSize van een scrollend frame kan worden beïnvloed door de VerticalScrollBarInset en/of HorizontalScrollBarInset eigenschappen. In het volgende voorbeelddiagram gebruikt een verticaal scrollend frame een canvasbreedte van 100%. Met VerticalScrollBarInset ingesteld op None (standaard), strekt het canvas zich uit tot de volledige breedte van het scrollende frame, waardoor een klein deel van de inhoud onder de scrollbalk wordt verborgen. In tegenstelling tot dat, zorgt een instelling van VerticalScrollBarInset van Always of ScrollBar ervoor dat het canvas met de ScrollBarThickness hoeveelheid wordt ingekort, zodat het canvas rand‑tot‑rand met de scrollbalk aansluit.
Scrollbalken
De scrollbalken van het frame weerspiegelen de huidige canvaspositie en bieden automatische sleep-om-te-scrollen interactiviteit. Voor verticale scrollbalken schakelt de VerticalScrollBarPosition eigenschap de positie van de balk in naar links of rechts van het canvas, maar horizontale scrollbalken kunnen alleen onder het canvas worden gepositioneerd.
De constructie van de scrollbalk bestaat uit drie asset-eigenschappen:
- TopImage — Weergegeven bovenaan een verticale scrollbalk, of aan de linkerkant van een horizontale scrollbalk (90° tegen de klok in gedraaid voor een horizontale scrollbalk).
- MidImage — Beslaat het gebied tussen TopImage en BottomImage (90° tegen de klok in gedraaid voor een horizontale scrollbalk).
- BottomImage — Weergegeven onderaan een verticale scrollbalk, of aan de rechterkant van een horizontale scrollbalk (90° tegen de klok in gedraaid voor een horizontale scrollbalk).
Elke afbeelding schaalt op basis van de ScrollBarThickness eigenschap, die de breedte van een verticale scrollbalk of de hoogte van een horizontale scrollbalk verandert.
Aanvullende visuele aanpassingen kunnen worden gedaan via de ScrollBarImageColor3 en ScrollBarImageTransparency eigenschappen, die de afbeeldingsassets van de balk tinten en respectievelijk de doorzichtigheid wijzigen.
Afkapping
Standaard knippen GuiObject containers de inhoud (afgeleide GuiObjects) via de ClipsDescendants boolean. Als je wilt dat afgeleiden buiten de grenzen van een container verschijnen, stel je eenvoudig ClipsDescendants in op false.
Belangrijk is dat StarterGui.ClipsDescendantsSupportsRotation true moet zijn voor knippen om te werken op geroteerde afgeleiden (niet-nul Rotation) binnen de container. Echter, knippen door een geroteerde container (de knipcontainer zelf is geroteerd) of door afgeronde hoeken (UICorner) wordt niet ondersteund. Als je knippen nodig hebt op geroteerde of afgeronde containers, overweeg dan CanvasGroup.
Rotation = 0
Rotation = 10
Elasticiteit
Standaard vertonen ScrollingFrames elastisch scrollgedrag op apparaten met aanraakfunctionaliteit, wat betekent dat gebruikers het canvas iets verder kunnen slepen dan de grenzen en, bij het loslaten, het canvas terugveert naar de minimum- of maximumlimiet. Als je het elastische gedrag volledig wilt verwijderen en ervoor wilt zorgen dat het canvas nooit voorbij zijn grenzen scrollt, stel dan de ElasticBehavior eigenschap in op Never.