Un ScrollingFrame se compose d'un toile 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. ScrollingFrame est idéal pour afficher beaucoup d'informations dans un espace limité et fonctionne bien avec les mises en page liste et grille.
Toile
La toile est la zone principale d'un 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 ; en particulier, le total CanvasSize.Y dépasse le total 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 ; en particulier, le total CanvasSize.X dépasse le total Size.X. | Le défilement horizontal est activé et une barre de défilement horizontale apparaît. |
| La AutomaticCanvasSize du cadre est réglée 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 réglée 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 de la toile au sein 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éfilement peut être affectée par les propriétés VerticalScrollBarInset et/ou HorizontalScrollBarInset. Dans le diagramme d'exemple suivant, un cadre qui défile verticalement utilise une largeur de toile de 100 %. Avec VerticalScrollBarInset réglé sur None (défaut), la toile s'étend jusqu'à la pleine largeur du cadre à défilement, obscurcissant légèrement une partie du contenu sous la barre de défilement. En revanche, un réglage VerticalScrollBarInset de Always ou ScrollBar insère la toile par le montant de ScrollBarThickness pour que la toile 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 de la toile et fournissent une interactivité de défilement par glissement automatique. Pour les barres de défilement verticales, la propriété VerticalScrollBarPosition déplace la position de la barre soit à gauche, soit à droite de la toile, mais les barres de défilement horizontales ne peuvent être positionnées qu'en dessous de la toile.
La construction de la barre de défilement se compose de trois propriétés d'éléments :
- 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 inverse des aiguilles d'une montre pour une barre de défilement horizontale).
- MidImage — S'étend sur la zone entre TopImage et BottomImage (rotatée de 90° dans le sens inverse des aiguilles d'une montre 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 inverse des aiguilles d'une montre 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 effectuées à travers les propriétés ScrollBarImageColor3 et ScrollBarImageTransparency qui teintent les actifs d'image de la barre et modifient son opacité, respectivement.
Élasticité
Par défaut, les ScrollingFrames exhibent un comportement de défilement élastique sur les appareils à écran tactile, ce qui signifie que les utilisateurs peuvent faire glisser la toile légèrement au-delà de ses limites et, une fois relâchée, la toile reviendra à sa limite minimale ou maximale. Si vous souhaitez supprimer complètement le comportement élastique et garantir que la toile ne dépasse jamais ses limites, réglez la propriété ElasticBehavior sur Never.