Marcos de desplazamiento

*Este contenido se traduce usando la IA (Beta) y puede contener errores. Para ver esta página en inglés, haz clic en aquí.

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 los diseños de lista y rejilla.

Ejemplo de ScrollingFrame en la pantalla que contiene una barra de categoría con pestañas y una lista de elementos mágicos que el jugador puede considerar comprar.

Lienzo

El ** lienzo ** es el área principal de una ScrollingFrame que puede contener otros GuiObjects. El comportamiento de desplazamiento se adapta automáticamente en los siguientes escenarios:

Configuración del marcoResultado
El CanvasSize del marco es más alto que su altura total; específicamente, el total CanvasSize.Y excede el total 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 CanvasSize.X excede el total 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 (subobjetos 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 (subobjetos 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 a todo el ancho del marco de desplazamiento, oscureciendo una pequeña cantidad de contenido debajo de la barra de desplazamiento. En contraste, un ajuste de VerticalScrollBarInset de Always o ScrollBar incrusta 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 arrastrar para desplazar. 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 de imagen:

  • TopImage — Se muestra en la parte superior de una barra de desplazamiento vertical, o a la izquierda de una barra de desplazamiento horizontal (girada 90° en sentido antihorario para una barra de desplazamiento horizontal).
  • MidImage — Se extiende por el área entre TopImage y BottomImage (girada 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 (girada 90° en sentido antihorario para una barra de desplazamiento horizontal).
Diagrama que muestra los tres elementos de activos de imagen que componen la barra de desplazamiento de un marco de desplazamiento.

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.

Elasticidad

Por defecto, los ScrollingFrames exhiben un comportamiento de desplazamiento elástico en dispositivos con pantalla táctil, lo que significa que los usuarios pueden arrastrar el lienzo ligeramente 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 asegurar que el lienzo nunca se desplace más allá de sus límites, establece la propiedad ElasticBehavior en Never.

©2026 Roblox Corporation. Roblox, el logotipo de Roblox y "Powering Imagination" son algunas de nuestras marcas registradas y no registradas en los Estados Unidos y otros países.