17 min read

Source: Roblox Creator Hub · CC BY 4.0 · View source · Code samples: MIT Imported 2026-10-03. Formatting adapted for this site.

ScrollingFrame

Inherits from: GuiObject → GuiBase2d → GuiBase → Instance → Object

ScrollingFrame is a special Frame type with built-in scrolling interactivity and different ways to customize how the scrolling works.

Example ScrollingFrame on the screen containing a tabbed category bar and a list of magical items for the player to consider purchasing.

Inherits from: GuiObject

Memory category: Gui

Properties

NameType / ReturnsDescription
ScrollingFrame.AbsoluteCanvasSizeVector2The size of the area that is scrollable, in offsets.
ScrollingFrame.AbsoluteWindowSizeVector2The size of the frame, in offsets, without the scroll bars.
ScrollingFrame.AutomaticCanvasSizeAutomaticSizeDetermines whether ScrollingFrame.CanvasSize is resized based on child content.
ScrollingFrame.BottomImageContentIdImage 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).
ScrollingFrame.BottomImageContentContentThe Content-typed equivalent of BottomImage.
ScrollingFrame.CanvasPositionVector2Reflects the current positional offset of the canvas within the frame, in pixels, and sets the position of scroll bars accordingly.
ScrollingFrame.CanvasSizeUDim2Determines the size of the scrollable area.
ScrollingFrame.ElasticBehaviorElasticBehaviorDetermines if and when elastic scrolling is allowed on touch‑enabled devices.
ScrollingFrame.HorizontalScrollBarInsetScrollBarInsetIndicates whether CanvasSize is inset by ScrollBarThickness on the horizontal axis.
ScrollingFrame.MidImageContentIdImage which spans the area between TopImage and BottomImage (rotated 90° counterclockwise for a horizontal scroll bar).
ScrollingFrame.MidImageContentContentThe Content-typed equivalent of MidImage.
ScrollingFrame.ScrollBarImageColor3Color3Determines how the rendered scroll bar images are colorized.
ScrollingFrame.ScrollBarImageTransparencyfloatDetermines the opacity of the scroll bar images.
ScrollingFrame.ScrollBarThicknessintThickness of the scroll bar in pixels; applies to both horizontal and vertical scroll bars.
ScrollingFrame.ScrollingDirectionScrollingDirectionDetermines the direction(s) in which scrolling is allowed.
ScrollingFrame.ScrollingEnabledbooleanDetermines whether scrolling is allowed on the frame.
ScrollingFrame.TopImageContentIdImage 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).
ScrollingFrame.TopImageContentContentThe Content-typed equivalent of TopImage.
ScrollingFrame.VerticalScrollBarInsetScrollBarInsetIndicates whether CanvasSize is inset by ScrollBarThickness on the vertical axis.
ScrollingFrame.VerticalScrollBarPositionVerticalScrollBarPositionIndicates whether the vertical scroll bar is positioned to the left or right of the canvas.

Inherited from GuiObject

NameType / ReturnsDescription
GuiObject.ActivebooleanDetermines whether this UI element sinks input.
GuiObject.AnchorPointVector2Determines the origin point of a GuiObject, relative to its absolute size.
GuiObject.AutomaticSizeAutomaticSizeDetermines whether resizing occurs based on child content.
GuiObject.BackgroundColorBrickColorDetermines the color of the GuiObject background.
GuiObject.BackgroundColor3Color3Determines the GuiObject background color.
GuiObject.BackgroundTransparencyfloatDetermines the transparency of the GuiObject background and border.
GuiObject.BorderColorBrickColorDetermines the color of the GuiObject border.
GuiObject.BorderColor3Color3Determines the color of the GuiObject border.
GuiObject.BorderModeBorderModeDetermines in what manner the GuiObject border is laid out relative to its dimensions.
GuiObject.BorderSizePixelintDetermines the pixel width of the GuiObject border.
GuiObject.ClipsDescendantsbooleanDetermines if descendant GuiObjects outside of the bounds of a parent GUI element should render.
GuiObject.DraggablebooleanDetermines whether a GuiObject (and its descendants) can be dragged around the screen.
GuiObject.GuiStateGuiStateDetermines whether the player's mouse is being actively pressed on the GuiObject or not.
GuiObject.InputSinkInputSinkControls whether, and how, the GuiObject sinks input that occurs over it.
GuiObject.InteractablebooleanDetermines whether the GuiButton can be interacted with or not, or if the GuiState of the GuiObject is changing or not.
GuiObject.LayoutOrderintControls the sort order of the GuiObject when used with a UIGridStyleLayout.
GuiObject.NextSelectionDownGuiObjectSets the GuiObject which will be selected when the gamepad selector is moved downward.
GuiObject.NextSelectionLeftGuiObjectSets the GuiObject which will be selected when the gamepad selector is moved to the left.
GuiObject.NextSelectionRightGuiObjectSets the GuiObject which will be selected when the gamepad selector is moved to the right.
GuiObject.NextSelectionUpGuiObjectSets the GuiObject which will be selected when the gamepad selector is moved upward.
GuiObject.PositionUDim2Determines the pixel and scalar position of the GuiObject.
GuiObject.RotationfloatDetermines the number of degrees by which the GuiObject is rotated.
GuiObject.SelectablebooleanDetermine whether the GuiObject can be selected by a gamepad.
GuiObject.SelectionImageObjectGuiObjectOverrides the default selection adornment used for gamepads.
GuiObject.SelectionOrderintThe order of GuiObjects selected by the gamepad UI selection.
GuiObject.SizeUDim2Determines the pixel and scalar size of the GuiObject.
GuiObject.SizeConstraintSizeConstraintSets the Size axes that the GuiObject will be based on, relative to the size of its parent.
GuiObject.TransparencyfloatA mixed property of BackgroundTransparency and TextTransparency.
GuiObject.VisiblebooleanDetermines whether the GuiObject and its descendants will be rendered.
GuiObject.ZIndexintDetermines the order in which a GuiObject renders relative to others.

Inherited from GuiBase2d

NameType / ReturnsDescription
GuiBase2d.AbsolutePositionVector2Describes the actual screen position of a GuiBase2d element, in pixels.
GuiBase2d.AbsoluteRotationfloatDescribes the actual screen rotation of a GuiBase2d element, in degrees.
GuiBase2d.AbsoluteSizeVector2Describes the actual screen size of a GuiBase2d element, in pixels.
GuiBase2d.AutoLocalizebooleanWhen set to true, localization will be applied to this GuiBase2d and its descendants.
GuiBase2d.LocalizebooleanAutomatically set to true when a localization table's LocalizationTable.Root targets this object, or an ancestor of this object.
GuiBase2d.RootLocalizationTableLocalizationTableA reference to a LocalizationTable to be used to apply automated localization to this GuiBase2d and its descendants.
GuiBase2d.SelectionBehaviorDownSelectionBehaviorCustomizes gamepad selection behavior in the down direction.
GuiBase2d.SelectionBehaviorLeftSelectionBehaviorCustomizes gamepad selection behavior in the left direction.
GuiBase2d.SelectionBehaviorRightSelectionBehaviorCustomizes gamepad selection behavior in the right direction.
GuiBase2d.SelectionBehaviorUpSelectionBehaviorCustomizes gamepad selection behavior in the up direction.
GuiBase2d.SelectionGroupbooleanAllows customization of gamepad selection movement.

Inherited from Instance

NameType / ReturnsDescription
Instance.ArchivablebooleanDetermines if an Instance and its descendants can be cloned using Instance:Clone(), and can be saved/published.
Instance.archivableboolean
Instance.CapabilitiesSecurityCapabilitiesThe set of capabilities allowed to be used for scripts inside this container.
Instance.IsInSandboxbooleanIndicates whether the instance is inside a sandboxed container.
Instance.NamestringA non-unique identifier of the Instance.
Instance.ParentInstanceDetermines the hierarchical parent of the Instance.
Instance.PredictionModePredictionModeReflects the client-side prediction mode applied to the instance under server-authoritative physics.
Instance.RobloxLockedbooleanA deprecated property that used to protect CoreGui objects.
Instance.SandboxedbooleanWhen enabled, the instance can only access abilities in its Capabilities list.
Instance.UniqueIdUniqueIdA unique identifier for the instance.

Inherited from Object

NameType / ReturnsDescription
Object.ClassNamestringA read-only string representing the class this Object belongs to.
Object.classNamestring

ScrollingFrame.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 AutomaticSize.None.

FieldValue
typeVector2
tags["ReadOnly","NotReplicated"]
security{"read":"None","write":"None"}
thread safetyUnsafe
categoryScrolling
serialization{"can_load":false,"can_save":true}
capabilities["UI"]

ScrollingFrame.AbsoluteWindowSize

The size of the frame, in offsets, without the scroll bars. This read-only property represents the visible content area of the ScrollingFrame: the frame's AbsoluteSize minus the space occupied by any currently visible scroll bar gutters (ScrollBarThickness). If no scroll bars are visible, this equals the frame's absolute size.

FieldValue
typeVector2
tags["ReadOnly","NotReplicated"]
security{"read":"None","write":"None"}
thread safetyUnsafe
categoryScrolling
serialization{"can_load":false,"can_save":true}
capabilities["UI"]

ScrollingFrame.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 AutomaticSize value other than None, AbsoluteCanvasSize may resize depending on its child content.

FieldValue
typeAutomaticSize
security{"read":"None","write":"None"}
thread safetyReadSafe
categoryScrolling
serialization{"can_load":true,"can_save":true}
capabilities["UI"]

ScrollingFrame.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).

Diagram showing the three image asset elements which construct a scrolling frame's scroll bar.
FieldValue
typeContentId
security{"read":"None","write":"None"}
thread safetyReadSafe
categoryScrolling
serialization{"can_load":true,"can_save":true}
capabilities["UI"]

ScrollingFrame.BottomImageContent

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). Only supports asset URIs as textures.

Diagram showing the three image asset elements which construct a scrolling frame's scroll bar.
FieldValue
typeContent
security{"read":"None","write":"None"}
thread safetyReadSafe
categoryScrolling
serialization{"can_load":true,"can_save":true}
capabilities["UI"]

ScrollingFrame.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.

FieldValue
typeVector2
security{"read":"None","write":"None"}
thread safetyReadSafe
categoryScrolling
serialization{"can_load":true,"can_save":true}
capabilities["UI"]

ScrollingFrame.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.

FieldValue
typeUDim2
security{"read":"None","write":"None"}
thread safetyReadSafe
categoryScrolling
serialization{"can_load":true,"can_save":true}
capabilities["UI"]

ScrollingFrame.ElasticBehavior

This property determines if and when elastic scrolling is allowed on touch‑enabled devices. Defaults to WhenScrollable.

FieldValue
typeElasticBehavior
security{"read":"None","write":"None"}
thread safetyReadSafe
categoryScrolling
serialization{"can_load":true,"can_save":true}
capabilities["UI"]

ScrollingFrame.HorizontalScrollBarInset

Indicates whether the scrollable canvas is inset by ScrollBarThickness to account for the horizontal scroll bar. Because the horizontal scroll bar occupies space along the bottom edge, this inset reduces the canvas height. Defaults to ScrollBarInset.None.

FieldValue
typeScrollBarInset
security{"read":"None","write":"None"}
thread safetyReadSafe
categoryScrolling
serialization{"can_load":true,"can_save":true}
capabilities["UI"]

ScrollingFrame.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.

Diagram showing the three image asset elements which construct a scrolling frame's scroll bar.
FieldValue
typeContentId
security{"read":"None","write":"None"}
thread safetyReadSafe
categoryScrolling
serialization{"can_load":true,"can_save":true}
capabilities["UI"]

ScrollingFrame.MidImageContent

Image which spans the area between TopImageContent and BottomImageContent (rotated 90° counterclockwise for a horizontal scroll bar). This image automatically scales to fill the space between the cap segments. Only supports asset URIs as textures.

Diagram showing the three image asset elements which construct a scrolling frame's scroll bar.
FieldValue
typeContent
security{"read":"None","write":"None"}
thread safetyReadSafe
categoryScrolling
serialization{"can_load":true,"can_save":true}
capabilities["UI"]

ScrollingFrame.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.

FieldValue
typeColor3
security{"read":"None","write":"None"}
thread safetyReadSafe
categoryScrolling
serialization{"can_load":true,"can_save":true}
capabilities["UI"]

ScrollingFrame.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).

FieldValue
typefloat
security{"read":"None","write":"None"}
thread safetyReadSafe
categoryScrolling
serialization{"can_load":true,"can_save":true}
capabilities["UI"]

ScrollingFrame.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.

FieldValue
typeint
security{"read":"None","write":"None"}
thread safetyReadSafe
categoryScrolling
serialization{"can_load":true,"can_save":true}
capabilities["UI"]

ScrollingFrame.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 ScrollingDirection.XY.

FieldValue
typeScrollingDirection
security{"read":"None","write":"None"}
thread safetyReadSafe
categoryScrolling
serialization{"can_load":true,"can_save":true}
capabilities["UI"]

ScrollingFrame.ScrollingEnabled

Determines whether scrolling is allowed on the frame. If false, no scroll bars will be rendered.

FieldValue
typeboolean
security{"read":"None","write":"None"}
thread safetyReadSafe
categoryScrolling
serialization{"can_load":true,"can_save":true}
capabilities["UI"]

ScrollingFrame.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).

Diagram showing the three image asset elements which construct a scrolling frame's scroll bar.
FieldValue
typeContentId
security{"read":"None","write":"None"}
thread safetyReadSafe
categoryScrolling
serialization{"can_load":true,"can_save":true}
capabilities["UI"]

ScrollingFrame.TopImageContent

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). Only supports asset URIs as textures. Defaults to the built-in scroll bar top cap texture (rbxasset://textures/ui/Scroll/scroll-top.png).

Diagram showing the three image asset elements which construct a scrolling frame's scroll bar.
FieldValue
typeContent
security{"read":"None","write":"None"}
thread safetyReadSafe
categoryScrolling
serialization{"can_load":true,"can_save":true}
capabilities["UI"]

ScrollingFrame.VerticalScrollBarInset

Indicates whether the scrollable canvas is inset by ScrollBarThickness to account for the vertical scroll bar. Because the vertical scroll bar occupies space along a side edge, this inset reduces the canvas width. Defaults to ScrollBarInset.None.

FieldValue
typeScrollBarInset
security{"read":"None","write":"None"}
thread safetyReadSafe
categoryScrolling
serialization{"can_load":true,"can_save":true}
capabilities["UI"]

ScrollingFrame.VerticalScrollBarPosition

Indicates whether the vertical scroll bar is positioned to the left or right of the canvas. Defaults to VerticalScrollBarPosition.Right.

FieldValue
typeVerticalScrollBarPosition
security{"read":"None","write":"None"}
thread safetyReadSafe
categoryScrolling
serialization{"can_load":true,"can_save":true}
capabilities["UI"]

Methods

NameType / ReturnsDescription
ScrollingFrame:GetScrollVelocityVector2Returns a Vector2 representing the current inertial scroll velocity after the user stops their input.
ScrollingFrame:ResetScrollVelocity()Resets the inertial scroll velocity of the ScrollingFrame to 0 on both axes.

Inherited from GuiObject

NameType / ReturnsDescription
GuiObject:TweenPositionbooleanSmoothly moves a GUI to a new UDim2.
GuiObject:TweenSizebooleanSmoothly resizes a GuiObject to a new UDim2.
GuiObject:TweenSizeAndPositionbooleanSmoothly moves a GUI to a new size and position.

Inherited from Instance

NameType / ReturnsDescription
Instance:AddTag()Applies a tag to the instance.
Instance:childrenInstancesReturns an array of the object's children.
Instance:ClearAllChildren()This method destroys all of an instance's children.
Instance:CloneInstanceCreate a copy of an instance and all its descendants, ignoring instances that are not Archivable.
Instance:cloneInstance
Instance:Destroy()Sets the Instance.Parent property to nil, locks the Instance.Parent property, disconnects all connections, and calls Destroy() on all children.
Instance:destroy()
Instance:FindFirstAncestorInstance?Returns the first ancestor of the Instance whose Instance.Name is equal to the given name.
Instance:FindFirstAncestorOfClassInstance?Returns the first ancestor of the Instance whose Object.ClassName is equal to the given className.
Instance:FindFirstAncestorWhichIsAInstance?Returns the first ancestor of the Instance for whom Object:IsA() returns true for the given className.
Instance:FindFirstChildInstance?Returns the first child of the Instance found with the given name.
Instance:findFirstChildInstance
Instance:FindFirstChildOfClassInstance?Returns the first child of the Instance whose ClassName is equal to the given class name.
Instance:FindFirstChildWhichIsAInstance?Returns the first child of the Instance for whom Object:IsA() returns true for the given className.
Instance:FindFirstDescendantInstance?Returns the first descendant found with the given Instance.Name.
Instance:GetActorActor?Returns the Actor associated with the Instance, if any.
Instance:GetAttributeVariantReturns the value which has been assigned to the given attribute name.
Instance:GetAttributeChangedSignalRBXScriptSignalReturns an event that fires when the given attribute changes.
Instance:GetAttributesDictionaryReturns a dictionary of the instance's attributes.
Instance:GetChildrenInstancesReturns an array containing all of the instance's children.
Instance:getChildrenInstances
Instance:GetDebugIdstringReturns a coded string of the debug ID used internally by Roblox.
Instance:GetDescendantsInstancesReturns an array containing all of the descendants of the instance.
Instance:GetFullNamestringReturns a string describing the instance's ancestry.
Instance:GetStyledVariantReturns the styled or explicitly modified value of the specified property, or else the default property value if it hasn't been styled/modified.
Instance:GetStyledPropertyChangedSignalRBXScriptSignalReturns an event that fires when the given style property changes on the instance.
Instance:GetTagsArrayGets an array of all tags applied to the instance.
Instance:HasTagbooleanCheck whether the instance has a given tag.
Instance:IsAncestorOfbooleanReturns true if an Instance is an ancestor of the given descendant.
Instance:IsDescendantOfbooleanReturns true if an Instance is a descendant of the given ancestor.
Instance:isDescendantOfboolean
Instance:IsPropertyModifiedbooleanReturns true if the value stored in the specified property is not equal to the code-instantiated default.
Instance:QueryDescendantsInstancesReturns an array containing all descendants of the instance that match the selector string.
Instance:Remove()Sets the object's Parent to nil, and does the same for all its descendants.
Instance:remove()
Instance:RemoveTag()Removes a tag from the instance.
Instance:ResetPropertyToDefault()Resets a property to its default value.
Instance:SetAttribute()Sets the attribute with the given name to the given value.
Instance:WaitForChildInstanceReturns the child of the Instance with the given name. If the child does not exist, it will yield the current thread until it does.

Inherited from Object

NameType / ReturnsDescription
Object:GetPropertyChangedSignalRBXScriptSignalGet an event that fires when a given property of the object changes.
Object:IsAbooleanReturns true if an object's class matches or inherits from a given class.
Object:isAboolean

ScrollingFrame:GetScrollVelocity

Returns a Vector2 representing the current inertial scroll velocity after the user stops their input, for example lifts their finger off the ScrollingFrame on a touch-enabled device.

Note that this method may only produce noticable data on an actual device or in an emulated scenario from Studio's Device Emulator.

Returns

TypeDescription
Vector2The current inertial scroll velocity in pixels per second on each axis, or (0, 0) if the frame is not coasting.
FieldValue
securityNone
thread safetyUnsafe
capabilities["UI"]

ScrollingFrame:ResetScrollVelocity

Resets the inertial scroll velocity of the ScrollingFrame to 0 on both axes.

Returns

TypeDescription
()
FieldValue
securityNone
thread safetyUnsafe
capabilities["UI"]

Events

Inherited from GuiObject

NameType / ReturnsDescription
GuiObject.DragBeginFired when a player begins dragging the object.
GuiObject.DragStoppedFired when a player stops dragging the object.
GuiObject.InputBeganFired when a user begins interacting via a Human-Computer Interface device (Mouse button down, touch begin, keyboard button down, etc).
GuiObject.InputChangedFired when a user changes how they're interacting via a Human-Computer Interface device (Mouse button down, touch begin, keyboard button down, etc).
GuiObject.InputEndedFired when a user stops interacting via a Human-Computer Interface device (Mouse button down, touch begin, keyboard button down, etc).
GuiObject.MouseEnterFires when a user moves their mouse into a GUI element.
GuiObject.MouseLeaveFires when a user moves their mouse out of a GUI element.
GuiObject.MouseMovedFires whenever a user moves their mouse while it is inside a GUI element.
GuiObject.MouseWheelBackwardFires when a user scrolls their mouse wheel back when the mouse is over a GUI element.
GuiObject.MouseWheelForwardFires when a user scrolls their mouse wheel forward when the mouse is over a GUI element.
GuiObject.SelectionGainedFired when the GuiObject is being focused on with the Gamepad selector.
GuiObject.SelectionLostFired when the Gamepad selector stops focusing on the GuiObject.
GuiObject.TouchLongPressFires when the player starts, continues and stops long-pressing the UI element.
GuiObject.TouchPanFires when the player moves their finger on the UI element.
GuiObject.TouchPinchFires when the player performs a pinch or pull gesture using two fingers on the UI element.
GuiObject.TouchRotateFires when the player performs a rotation gesture using two fingers on the UI element.
GuiObject.TouchSwipeFires when the player performs a swipe gesture on the UI element.
GuiObject.TouchTapFires when the player performs a tap gesture on the UI element.

Inherited from GuiBase2d

NameType / ReturnsDescription
GuiBase2d.SelectionChangedFires when the gamepad selection moves to, leaves, or changes within the connected GuiBase2d or any descendant GuiObjects.

Inherited from Instance

NameType / ReturnsDescription
Instance.AncestryChangedFires when the Instance.Parent property of this object or one of its ancestors is changed.
Instance.AttributeChangedFires whenever an attribute is changed on the Instance.
Instance.ChildAddedFires after an object is parented to this Instance.
Instance.childAdded
Instance.ChildRemovedFires after a child is removed from this Instance.
Instance.DescendantAddedFires after a descendant is added to the Instance.
Instance.DescendantRemovingFires immediately before a descendant of the Instance is removed.
Instance.DestroyingFires immediately before (or is deferred until after) the instance is destroyed via Instance:Destroy().
Instance.StyledPropertiesChangedFires whenever any style property is changed on the instance, including when a property is set to nil.

Inherited from Object

NameType / ReturnsDescription
Object.ChangedFires immediately after a property of the object changes, with some limitations.