Ein ScrollingFrame besteht aus einem anpassbaren Canvas und Scrollleisten mit integrierter Scroll-Interaktivität und verschiedenen Möglichkeiten, das Scrollen anzupassen. ScrollingFrame ist ideal, um viele Informationen auf kleinem Raum anzuzeigen, und funktioniert gut mit Listen und Raster Layouts.
Canvas
Der Canvas ist der primäre Bereich eines ScrollingFrame, der andere GuiObjects enthalten kann. Das Scrollverhalten passt sich automatisch in den folgenden Szenarien an:
| Rahmenkonfiguration | Ergebnis |
|---|---|
| Die CanvasSize des Rahmens ist höher als seine Gesamthöhe; konkret überschreitet die gesamte CanvasSize.Y die gesamte Size.Y. | Vertikales Scrollen ist aktiviert und eine vertikale Scrollleiste erscheint. |
| Die CanvasSize des Rahmens ist breiter als seine Gesamtbreite; konkret überschreitet die gesamte CanvasSize.X die gesamte Size.X. | Horizontales Scrollen ist aktiviert und eine horizontale Scrollleiste erscheint. |
| Die AutomaticCanvasSize des Rahmens ist auf Y oder XY eingestellt und die Gesamthöhe seines Inhalts (untergeordnete GuiObjects) überschreitet die gesamte Size.Y. | Vertikales Scrollen ist aktiviert und eine vertikale Scrollleiste erscheint. |
| Die AutomaticCanvasSize des Rahmens ist auf X oder XY eingestellt und die Gesamtbreite seines Inhalts (untergeordnete GuiObjects) überschreitet die gesamte Size.X. | Horizontales Scrollen ist aktiviert und eine horizontale Scrollleiste erscheint. |
Die CanvasPosition-Eigenschaft spiegelt den aktuellen Positionsversatz des Canvas innerhalb des Rahmens in Pixeln wider und setzt die Position der Scrollleisten entsprechend. Beachten Sie, dass diese Eigenschaft nichts bewirkt, wenn die Scrollleisten nicht sichtbar sind.
Innenabstände
Die CanvasSize eines Scrollrahmens kann von den Eigenschaften VerticalScrollBarInset und/oder HorizontalScrollBarInset beeinflusst werden. Im folgenden Beispiel-Diagramm verwendet ein vertikal scrollender Rahmen eine Canvas-Breite von 100 %. Mit VerticalScrollBarInset, das auf None (Standard) eingestellt ist, erstreckt sich der Canvas über die gesamte Breite des Scrollrahmens und verdeckt einen kleinen Teil des Inhalts unter der Scrollleiste. Im Gegensatz dazu schneidet eine Einstellung von VerticalScrollBarInset auf entweder Always oder ScrollBar den Canvas um die ScrollBarThickness-Menge ein, sodass der Canvas rand-zu-rand mit der Scrollleiste abschließt.
Scrollleisten
Die Scrollleisten des Rahmens spiegeln die aktuelle Canvas-Position wider und bieten eine automatische Drag-to-Scroll-Interaktivität. Für vertikale Scrollleisten wechselt die VerticalScrollBarPosition-Eigenschaft die Position der Leiste entweder auf die linke oder rechte Seite des Canvas, während horizontale Scrollleisten nur unter dem Canvas positioniert werden können.
Der Aufbau der Scrollleiste besteht aus drei Asset-Eigenschaften:
- TopImage — Wird oben auf einer vertikalen Scrollleiste oder links auf einer horizontalen Scrollleiste angezeigt (um 90° gegen den Uhrzeigersinn für eine horizontale Scrollleiste gedreht).
- MidImage — Deckt den Bereich zwischen TopImage und BottomImage ab (um 90° gegen den Uhrzeigersinn für eine horizontale Scrollleiste gedreht).
- BottomImage — Wird unten auf einer vertikalen Scrollleiste oder rechts auf einer horizontalen Scrollleiste angezeigt (um 90° gegen den Uhrzeigersinn für eine horizontale Scrollleiste gedreht).
Jedes Bild skaliert basierend auf der ScrollBarThickness-Eigenschaft, die die Breite einer vertikalen Scrollleiste oder die Höhe einer horizontalen Scrollleiste ändert.
Zusätzliche visuelle Modifikationen können über die Eigenschaften ScrollBarImageColor3 und ScrollBarImageTransparency vorgenommen werden, die die Bild-Assets der Leiste einfärben und ihre Opazität ändern.
Beschneidung
By default, GuiObject-Container schneiden ihren Inhalt (Nachkommen GuiObjects) durch das boolean ClipsDescendants ab. Wenn Sie möchten, dass Nachkommen außerhalb der Grenzen eines Containers erscheinen, setzen Sie einfach ClipsDescendants auf false.
Wichtig ist, dass StarterGui.ClipsDescendantsSupportsRotation auf true gesetzt sein muss, damit das Beschneiden bei rotierten Nachkommen (nicht-null Rotation) innerhalb des Containers funktioniert. Das Beschneiden durch einen rotierten Container (der beschneidende Container selbst ist rotiert) oder durch abgerundete Ecken (UICorner) wird jedoch nicht unterstützt. Wenn Sie Beschneidung bei rotierten oder abgerundeten Containern benötigen, sollten Sie CanvasGroup in Betracht ziehen.
Rotation = 0
Rotation = 10
Elastizität
Standardmäßig zeigen ScrollingFrames ein elastisches Scrollverhalten auf berührungsempfindlichen Geräten, was bedeutet, dass Benutzer den Canvas leicht über seine Grenzen hinaus ziehen können und beim Loslassen der Canvas zu seinem minimalen oder maximalen Limit zurückspringt. Wenn Sie das elastische Verhalten vollständig entfernen und sicherstellen möchten, dass der Canvas niemals über seine Grenzen hinaus scrollt, setzen Sie die ElasticBehavior-Eigenschaft auf Never.