ScrollingFrame
ScrollingFrame is a special Frame type with built-in scrolling interactivity and different ways to customize how the scrolling works.
Summary
Properties
The size of the area that is scrollable, in offsets.
The size of the frame, in offsets, without the scroll bars.
Determines whether ScrollingFrame.CanvasSize is resized based on child content.
Image that displays on the bottom of a vertical scroll bar, or the right of a horizontal scroll bar (rotated 90° counterclockwise for a horizontal scroll bar).
Reflects the current positional offset of the canvas within the frame, in pixels, and sets the position of scroll bars accordingly.
Determines the size of the scrollable area.
Determines if and when elastic scrolling is allowed on touch‑enabled devices.
Indicates whether CanvasSize is inset by ScrollBarThickness on the horizontal axis.
Image which spans the area between TopImage and BottomImage (rotated 90° counterclockwise for a horizontal scroll bar).
Determines how the rendered scroll bar images are colorized.
Determines the opacity of the scroll bar images.
Thickness of the scroll bar in pixels; applies to both horizontal and vertical scroll bars.
Determines the direction(s) in which scrolling is allowed.
Determines whether scrolling is allowed on the frame.
Image which displays on the top of a vertical scroll bar, or the left of a horizontal scroll bar (rotated 90° counterclockwise for a horizontal scroll bar).
Indicates whether CanvasSize is inset by ScrollBarThickness on the vertical axis.
Indicates whether the vertical scroll bar is positioned to the left or right of the canvas.
Determines whether this UI element sinks input.
Determines the origin point of a GuiObject, relative to its absolute size.
Determines whether resizing occurs based on child content.
Determines the GuiObject background color.
Determines the transparency of the GuiObject background and border.
Determines the color of the GuiObject border.
Determines in what manner the GuiObject border is laid out relative to its dimensions.
Determines the pixel width of the GuiObject border.
Determines if descendant GuiObjects outside of the bounds of a parent GUI element should render.
Determines whether the player's mouse is being actively pressed on the GuiObject or not.
Determines whether the GuiButton can be interacted with or not, or if the GuiState of the GuiObject is changing or not.
Controls the sort order of the GuiObject when used with a UIGridStyleLayout.
Sets the GuiObject which will be selected when the gamepad selector is moved downward.
Sets the GuiObject which will be selected when the gamepad selector is moved to the left.
Sets the GuiObject which will be selected when the gamepad selector is moved to the right.
Sets the GuiObject which will be selected when the gamepad selector is moved upward.
Determines the pixel and scalar position of the GuiObject.
Determines the number of degrees by which the GuiObject is rotated.
Determine whether the GuiObject can be selected by a gamepad.
Overrides the default selection adornment used for gamepads.
The order of GuiObjects selected by the gamepad UI selection.
Determines the pixel and scalar size of the GuiObject.
Sets the Size axes that the GuiObject will be based on, relative to the size of its parent.
A mixed property of BackgroundTransparency and TextTransparency.
Determines whether the GuiObject and its descendants will be rendered.
Determines the order in which a GuiObject renders relative to others.
Describes the actual screen position of a GuiBase2d element, in pixels.
Describes the actual screen rotation of a GuiBase2d element, in degrees.
Describes the actual screen size of a GuiBase2d element, in pixels.
When set to true, localization will be applied to this GuiBase2d and its descendants.
A reference to a LocalizationTable to be used to apply automated localization to this GuiBase2d and its descendants.
Customizes gamepad selection behavior in the down direction.
Customizes gamepad selection behavior in the left direction.
Customizes gamepad selection behavior in the right direction.
Customizes gamepad selection behavior in the up direction.
Allows customization of gamepad selection movement.
Methods
Methods inherited from GuiObject- TweenPosition(endPosition : UDim2,easingDirection : Enum.EasingDirection,easingStyle : Enum.EasingStyle,time : number,override : bool,callback : function):bool
Smoothly moves a GUI to a new UDim2.
- TweenSize(endSize : UDim2,easingDirection : Enum.EasingDirection,easingStyle : Enum.EasingStyle,time : number,override : bool,callback : function):bool
- TweenSizeAndPosition(endSize : UDim2,endPosition : UDim2,easingDirection : Enum.EasingDirection,easingStyle : Enum.EasingStyle,time : number,override : bool,callback : function):bool
Smoothly moves a GUI to a new size and position.
Events
Events inherited from GuiObjectFired when a user begins interacting via a Human-Computer Interface device (Mouse button down, touch begin, keyboard button down, etc).
Fired when a user changes how they're interacting via a Human-Computer Interface device (Mouse button down, touch begin, keyboard button down, etc).
Fired when a user stops interacting via a Human-Computer Interface device (Mouse button down, touch begin, keyboard button down, etc).
Fires when a user moves their mouse into a GUI element.
Fires when a user moves their mouse out of a GUI element.
Fires whenever a user moves their mouse while it is inside a GUI element.
Fires when a user scrolls their mouse wheel back when the mouse is over a GUI element.
Fires when a user scrolls their mouse wheel forward when the mouse is over a GUI element.
Fired when the GuiObject is being focused on with the Gamepad selector.
Fired when the Gamepad selector stops focusing on the GuiObject.
Fires when the player starts, continues and stops long-pressing the UI element.
- TouchPan(touchPositions : Array,totalTranslation : Vector2,velocity : Vector2,state : Enum.UserInputState):RBXScriptSignal
Fires when the player moves their finger on the UI element.
- TouchPinch(touchPositions : Array,scale : number,velocity : number,state : Enum.UserInputState):RBXScriptSignal
Fires when the player performs a pinch or pull gesture using two fingers on the UI element.
- TouchRotate(touchPositions : Array,rotation : number,velocity : number,state : Enum.UserInputState):RBXScriptSignal
Fires when the player performs a rotation gesture using two fingers on the UI element.
Fires when the player performs a swipe gesture on the UI element.
Fires when the player performs a tap gesture on the UI element.
- SelectionChanged(amISelected : bool,previousSelection : GuiObject,newSelection : GuiObject):RBXScriptSignal
Fires when the gamepad selection moves to, leaves, or changes within the connected GuiBase2d or any descendant GuiObjects.
Properties
AbsoluteCanvasSize
The size of the area that is scrollable, in offsets. This property is set to the maximum of the CanvasSize property and the size of the children if AutomaticCanvasSize is set to something other than Enum.AutomaticSize.None.
AutomaticCanvasSize
This property is used to automatically size parent UI objects based on the size of its descendants. You can use this property to dynamically add text and other content to a ScrollingFrame at edit or run time and the size will adjust to fit that content.
When this property is set to an Enum.AutomaticSize value other than None, AbsoluteCanvasSize may resize depending on its child content.
BottomImage
Image that displays on the bottom of a vertical scroll bar, or the right of a horizontal scroll bar (rotated 90° counterclockwise for a horizontal scroll bar).
CanvasPosition
Reflects the current positional offset of the canvas within the frame, in pixels, and sets the position of scroll bars accordingly. Note that this property doesn't do anything if scroll bars aren't visible.
CanvasSize
Determines the size of the scrollable area. For an adaptive alternative based on the overall size of children within the ScrollingFrame, consider using AutomaticCanvasSize.
ElasticBehavior
This property determines if and when elastic scrolling is allowed on touch‑enabled devices. Defaults to WhenScrollable.
HorizontalScrollBarInset
Indicates whether CanvasSize is inset by ScrollBarThickness on the horizontal axis.
MidImage
Image which spans the area between TopImage and BottomImage (rotated 90° counterclockwise for a horizontal scroll bar). This image automatically scales to fill the space between the cap segments.
ScrollBarImageColor3
Determines how the scroll bar images (TopImage, MidImage, BottomImage) are colorized. When set to white, no colorization occurs. This property is useful for reusing image assets; if the source images are completely white with transparency, you can set the color of the entire scroll bar at once.
ScrollBarImageTransparency
Determines the opacity of the scroll bar images (TopImage, MidImage, BottomImage). A value of 0 is completely opaque and a value of 1 is completely transparent (invisible).
ScrollBarThickness
Thickness of the scroll bar in pixels; applies to both horizontal and vertical scroll bars. If set to 0, no scroll bars are rendered.
ScrollingDirection
This property determines the direction(s) in which scrolling is allowed. If scrolling is disallowed in a direction, the associated scroll bar will not appear. Defaults to Enum.ScrollingDirection.XY.
ScrollingEnabled
Determines whether scrolling is allowed on the frame. If false, no scroll bars will be rendered.
TopImage
Image which displays on the top of a vertical scroll bar, or the left of a horizontal scroll bar (rotated 90° counterclockwise for a horizontal scroll bar).
VerticalScrollBarInset
Indicates whether CanvasSize is inset by ScrollBarThickness on the vertical axis.
VerticalScrollBarPosition
Indicates whether the vertical scroll bar is positioned to the left or right of the canvas. Defaults to Enum.VerticalScrollBarPosition.Right.