Une ScrollingFrame se compose d'un canvas personnalisable et de barres de défilement avec une interactivité de défilement intégrée et différentes manières de personnaliser le fonctionnement du défilement. La ScrollingFrame est idéale pour afficher beaucoup d'informations dans un espace confiné et fonctionne bien avec les mises en page en liste et en grille.
Canvas
Le canvas est la zone principale d'une ScrollingFrame qui peut contenir d'autres GuiObjects. Le comportement de défilement s'adapte automatiquement dans les scénarios suivants :
| Configuration du cadre | Résultat |
|---|---|
| La CanvasSize du cadre est plus haute que sa hauteur totale ; spécifiquement, le total de CanvasSize.Y dépasse le total de Size.Y. | Le défilement vertical est activé et une barre de défilement verticale apparaît. |
| La CanvasSize du cadre est plus large que sa largeur totale ; spécifiquement, le total de CanvasSize.X dépasse le total de Size.X. | Le défilement horizontal est activé et une barre de défilement horizontale apparaît. |
| La AutomaticCanvasSize du cadre est définie sur Y ou XY et la hauteur totale de son contenu (enfants GuiObjects) dépasse sa Size.Y totale. | Le défilement vertical est activé et une barre de défilement verticale apparaît. |
| La AutomaticCanvasSize du cadre est définie sur X ou XY et la largeur totale de son contenu (enfants GuiObjects) dépasse sa Size.X totale. | Le défilement horizontal est activé et une barre de défilement horizontale apparaît. |
La propriété CanvasPosition reflète le décalage positionnel actuel du canvas à l'intérieur du cadre, en pixels, et définit la position des barres de défilement en conséquence. Notez que cette propriété n'a aucun effet si les barres de défilement ne sont pas visibles.
Marges
La CanvasSize d'un cadre défilant peut être affectée par les propriétés VerticalScrollBarInset et/ou HorizontalScrollBarInset. Dans le diagramme d'exemple suivant, un cadre défilant vertical utilise une largeur de canvas de 100 %. Avec VerticalScrollBarInset défini sur None (par défaut), le canvas s'étend sur toute la largeur du cadre défilant, obscurcissant légèrement une partie du contenu sous la barre de défilement. En revanche, un réglage de VerticalScrollBarInset à Always ou ScrollBar insère le canvas par le montant de ScrollBarThickness afin que le canvas soit bord à bord avec la barre de défilement.
Barres de défilement
Les barres de défilement du cadre reflètent la position actuelle du canvas et fournissent une interactivité de défilement automatique par glissement. Pour les barres de défilement verticales, la propriété VerticalScrollBarPosition change la position de la barre soit à gauche, soit à droite du canvas, mais les barres de défilement horizontales ne peuvent être positionnées qu'en dessous du canvas.
La construction de la barre de défilement se compose de trois propriétés d'actif :
- TopImage — Affiche en haut d'une barre de défilement verticale, ou à gauche d'une barre de défilement horizontale (rotatée de 90° dans le sens antihoraire pour une barre de défilement horizontale).
- MidImage — S'étend sur la zone entre TopImage et BottomImage (rotatée de 90° dans le sens antihoraire pour une barre de défilement horizontale).
- BottomImage — Affiche en bas d'une barre de défilement verticale, ou à droite d'une barre de défilement horizontale (rotatée de 90° dans le sens antihoraire pour une barre de défilement horizontale).
Chaque image s'adapte en fonction de la propriété ScrollBarThickness qui change la largeur d'une barre de défilement verticale ou la hauteur d'une barre de défilement horizontale.
Des modifications visuelles supplémentaires peuvent être apportées par les propriétés ScrollBarImageColor3 et ScrollBarImageTransparency qui teintent les actifs d'image de la barre et modifient son opacité, respectivement.
Découpage
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
Élasticité
Par défaut, les ScrollingFrames présentent un comportement de défilement élastique sur les appareils à écran tactile, ce qui signifie que les utilisateurs peuvent faire glisser le canvas légèrement au-delà de ses limites et, une fois relâché, le canvas reviendra à sa limite minimale ou maximale. Si vous souhaitez supprimer complètement le comportement élastique et vous assurer que le canvas ne défile jamais au-delà de ses limites, définissez la propriété ElasticBehavior sur Never.