Una ScrollingFrame consiste en un lienzo personalizable y barras de desplazamiento con interactividad de desplazamiento incorporada y diferentes formas de personalizar cómo funciona el desplazamiento. ScrollingFrame es ideal para mostrar mucha información en un espacio reducido y funciona bien con diseños de lista y rejilla.
Lienzo
El lienzo es el área principal de un ScrollingFrame que puede contener otros GuiObjects. El comportamiento de desplazamiento se adapta automáticamente en los siguientes escenarios:
| Configuración del marco | Resultado |
|---|---|
| El CanvasSize del marco es más alto que su altura total; específicamente, el total de CanvasSize.Y excede el total de Size.Y. | El desplazamiento vertical está habilitado y aparece una barra de desplazamiento vertical. |
| El CanvasSize del marco es más ancho que su ancho total; específicamente, el total de CanvasSize.X excede el total de Size.X. | El desplazamiento horizontal está habilitado y aparece una barra de desplazamiento horizontal. |
| El AutomaticCanvasSize del marco está configurado en Y o XY y la altura total de su contenido (hijos GuiObjects) excede su total Size.Y. | El desplazamiento vertical está habilitado y aparece una barra de desplazamiento vertical. |
| El AutomaticCanvasSize del marco está configurado en X o XY y el ancho total de su contenido (hijos GuiObjects) excede su total Size.X. | El desplazamiento horizontal está habilitado y aparece una barra de desplazamiento horizontal. |
La propiedad CanvasPosition refleja el desplazamiento posicional actual del lienzo dentro del marco, en píxeles, y establece la posición de las barras de desplazamiento en consecuencia. Ten en cuenta que esta propiedad no hace nada si las barras de desplazamiento no son visibles.
Márgenes
El CanvasSize de un marco de desplazamiento puede verse afectado por las propiedades VerticalScrollBarInset y/o HorizontalScrollBarInset. En el siguiente diagrama de ejemplo, un marco de desplazamiento vertical utiliza un ancho de lienzo del 100%. Con VerticalScrollBarInset configurado en None (predeterminado), el lienzo se extiende hasta el ancho completo del marco de desplazamiento, oscureciendo una pequeña cantidad de contenido bajo la barra de desplazamiento. En contraste, una configuración de VerticalScrollBarInset de Always o ScrollBar inserta el lienzo por la cantidad de ScrollBarThickness para que el lienzo se encuentre borde a borde con la barra de desplazamiento.
Barras de desplazamiento
Las barras de desplazamiento del marco reflejan la posición actual del lienzo y proporcionan interactividad automática de arrastre para desplazarse. Para las barras de desplazamiento verticales, la propiedad VerticalScrollBarPosition cambia la posición de la barra a la izquierda o derecha del lienzo, pero las barras de desplazamiento horizontales solo pueden posicionarse debajo del lienzo.
La construcción de la barra de desplazamiento consiste en tres propiedades de activos:
- TopImage — Se muestra en la parte superior de una barra de desplazamiento vertical, o a la izquierda de una barra de desplazamiento horizontal (rotada 90° en sentido antihorario para una barra de desplazamiento horizontal).
- MidImage — Se extiende por el área entre TopImage y BottomImage (rotada 90° en sentido antihorario para una barra de desplazamiento horizontal).
- BottomImage — Se muestra en la parte inferior de una barra de desplazamiento vertical, o a la derecha de una barra de desplazamiento horizontal (rotada 90° en sentido antihorario para una barra de desplazamiento horizontal).
Cada imagen se escala según la propiedad ScrollBarThickness que cambia el ancho de una barra de desplazamiento vertical o la altura de una barra de desplazamiento horizontal.
Se pueden realizar modificaciones visuales adicionales a través de las propiedades ScrollBarImageColor3 y ScrollBarImageTransparency que tiñen los activos de imagen de la barra y modifican su opacidad, respectivamente.
Recorte
Por defecto, los contenedores de GuiObject recortan su contenido (descendientes de GuiObjects) a través del booleano ClipsDescendants. Si deseas que los descendientes aparezcan fuera de los límites de un contenedor, simplemente establece ClipsDescendants en false.
Es importante tener en cuenta que StarterGui.ClipsDescendantsSupportsRotation debe ser true para que el recorte funcione en los descendientes rotados (no cero Rotation) dentro del contenedor. Sin embargo, el recorte por un contenedor rotado (el contenedor de recorte en sí está rotado) o por esquinas redondeadas (UICorner) no está soportado. Si necesitas recortes en contenedores rotados o redondeados, considera CanvasGroup.
Rotation = 0
Rotation = 10
Elasticidad
Por defecto, los ScrollingFrames exhiben un comportamiento de desplazamiento elástico en dispositivos habilitados para táctil, lo que significa que los usuarios pueden arrastrar el lienzo un poco más allá de sus límites y, al soltar, el lienzo volverá a su límite mínimo o máximo. Si deseas eliminar completamente el comportamiento elástico y asegurarte de que el lienzo nunca se desplace más allá de sus límites, establece la propiedad ElasticBehavior en Never.