Reference API Roblox

Engine API

Website

Related

Reference API Roblox

ScrollingFrame

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

Member index 32

HistoryMember
731AbsoluteCanvasSize: Vector2
731AbsoluteWindowSize: Vector2
731AutomaticCanvasSize: AutomaticSize
731BottomImage: ContentId
731BottomImageContent: Content
731CanvasPosition: Vector2
731CanvasSize: UDim2
731ElasticBehavior: ElasticBehavior
731HorizontalScrollBarInset: ScrollBarInset
731MidImage: ContentId
731MidImageContent: Content
731ScrollBarImageColor3: Color3
731ScrollBarImageTransparency: float
731ScrollBarThickness: int
731ScrollingDirection: ScrollingDirection
731ScrollingEnabled: bool
731TopImage: ContentId
731TopImageContent: Content
731VerticalScrollBarInset: ScrollBarInset
731VerticalScrollBarPosition: VerticalScrollBarPosition
573ClearInertialScrolling(): null
462GetSampledInertialVelocity(): Vector2
703GetScrollVelocity(): Vector2
703ResetScrollVelocity(): null
573ScrollToTop(): null
inherited from GuiObject
731Active: bool
731AnchorPoint: Vector2
731AutomaticSize: AutomaticSize
731BackgroundColor3: Color3
731BackgroundTransparency: float
731BorderColor3: Color3
731BorderMode: BorderMode
731BorderSizePixel: int
731ClipsDescendants: bool
731Draggable: bool
731GuiState: GuiState
731InputSink: InputSink
731Interactable: bool
731LayoutOrder: int
731NextSelectionDown: GuiObject
731NextSelectionLeft: GuiObject
731NextSelectionRight: GuiObject
731NextSelectionUp: GuiObject
731Position: UDim2
731Rotation: float
731Selectable: bool
731SelectionImageObject: GuiObject
731SelectionOrder: int
731Size: UDim2
731SizeConstraint: SizeConstraint
731Visible: bool
731ZIndex: int
462TweenPosition(endPosition: UDim2, easingDirection: EasingDirection = Out, easingStyle: EasingStyle = Quad, time: float = 1, override: bool = false, callback: Function = nil): bool
713TweenPositionInternal(endPosition: UDim2, easingDirection: EasingDirection = Out, easingStyle: EasingStyle = Quad, time: float = 1, override: bool = false, callback: Function = nil): bool
462TweenSize(endSize: UDim2, easingDirection: EasingDirection = Out, easingStyle: EasingStyle = Quad, time: float = 1, override: bool = false, callback: Function = nil): bool
462TweenSizeAndPosition(endSize: UDim2, endPosition: UDim2, easingDirection: EasingDirection = Out, easingStyle: EasingStyle = Quad, time: float = 1, override: bool = false, callback: Function = nil): bool
713TweenSizeAndPositionInternal(endSize: UDim2, endPosition: UDim2, easingDirection: EasingDirection = Out, easingStyle: EasingStyle = Quad, time: float = 1, override: bool = false, callback: Function = nil): bool
713TweenSizeInternal(endSize: UDim2, easingDirection: EasingDirection = Out, easingStyle: EasingStyle = Quad, time: float = 1, override: bool = false, callback: Function = nil): bool
462DragBegin(initialPosition: UDim2)
462DragStopped(x: int, y: int)
483InputBegan(input: InputObject)
483InputChanged(input: InputObject)
483InputEnded(input: InputObject)
462MouseEnter(x: int, y: int)
462MouseLeave(x: int, y: int)
462MouseMoved(x: int, y: int)
462MouseWheelBackward(x: int, y: int)
462MouseWheelForward(x: int, y: int)
462SelectionGained()
462SelectionLost()
462TouchLongPress(touchPositions: Array, state: UserInputState)
462TouchPan(touchPositions: Array, totalTranslation: Vector2, velocity: Vector2, state: UserInputState)
462TouchPinch(touchPositions: Array, scale: float, velocity: float, state: UserInputState)
462TouchRotate(touchPositions: Array, rotation: float, velocity: float, state: UserInputState)
462TouchSwipe(swipeDirection: SwipeDirection, numberOfTouches: int)
462TouchTap(touchPositions: Array)
inherited from GuiBase2d
731AbsolutePosition: Vector2
731AbsoluteRotation: float
731AbsoluteSize: Vector2
731AutoLocalize: bool
731RootLocalizationTable: LocalizationTable
731SelectionBehaviorDown: SelectionBehavior
731SelectionBehaviorLeft: SelectionBehavior
731SelectionBehaviorRight: SelectionBehavior
731SelectionBehaviorUp: SelectionBehavior
731SelectionGroup: bool
525SelectionChanged(amISelected: bool, previousSelection: GuiObject, newSelection: GuiObject)
inherited from Instance
731Archivable: bool
731Capabilities: SecurityCapabilities
731IsInSandbox: bool
731Name: string
731Parent: Instance
731PredictionMode: PredictionMode
731Sandboxed: bool
731UniqueId: UniqueId
576AddTag(tag: string): null
573ClearAllChildren(): null
462Clone(): Instance
573Destroy(): null
486FindFirstAncestor(name: string): Instance
486FindFirstAncestorOfClass(className: string): Instance
486FindFirstAncestorWhichIsA(className: string): Instance
486FindFirstChild(name: string, recursive: bool = false): Instance
486FindFirstChildOfClass(className: string): Instance
486FindFirstChildWhichIsA(className: string, recursive: bool = false): Instance
486FindFirstDescendant(name: string): Instance
563GetActor(): Actor
486GetAttribute(attribute: string): Variant
462GetAttributeChangedSignal(attribute: string): RBXScriptSignal
631GetAttributes(): Dictionary
648GetChildren(): Instances
462GetDebugId(scopeLength: int = 4): string
707GetDescendants(): Instances
486GetFullName(): string
706GetStyled(name: string, selector: string?): Variant
657GetStyledPropertyChangedSignal(property: string): RBXScriptSignal
576GetTags(): Array
576HasTag(tag: string): bool
486IsAncestorOf(descendant: Instance): bool
486IsDescendantOf(ancestor: Instance): bool
664IsPropertyModified(property: string): bool
698QueryDescendants(selector: string): Instances
573Remove(): null
576RemoveTag(tag: string): null
664ResetPropertyToDefault(property: string): null
573SetAttribute(attribute: string, value: Variant): null
462WaitForChild(childName: string, timeOut: double): Instance
731children(): Instances
731clone(): Instance
731destroy(): null
731findFirstChild(name: string, recursive: bool = false): Instance
731getChildren(): Instances
731isDescendantOf(ancestor: Instance): bool
731remove(): null
462AncestryChanged(child: Instance, parent: Instance)
462AttributeChanged(attribute: string)
462ChildAdded(child: Instance)
462ChildRemoved(child: Instance)
462DescendantAdded(descendant: Instance)
462DescendantRemoving(descendant: Instance)
500Destroying()
657StyledPropertiesChanged()
731childAdded(child: Instance)
inherited from Object
731ClassName: string
731className: string
647GetPropertyChangedSignal(property: string): RBXScriptSignal
647IsA(className: string): bool
731isA(className: string): bool
647Changed(property: string)

Removed member index 2

HistoryMember
290AutoSizeCanvas: bool
290AutoSizeCanvasPadding: UDim2

Description

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.

History 176

Members 32

AbsoluteCanvasSize

TypeDefault
Vector20, 0

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.

This property is not replicated. Its interface does not cross the network boundary.
This property is read-only. Its value can be read, but it cannot be modified.

History 12

Tags: [ReadOnly, NotReplicated]

AbsoluteWindowSize

TypeDefault
Vector20, 0

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.

This property is not replicated. Its interface does not cross the network boundary.
This property is read-only. Its value can be read, but it cannot be modified.

History 5

Tags: [ReadOnly, NotReplicated]

AutomaticCanvasSize

TypeDefault
AutomaticSizeNone

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.

History 6

BottomImage

TypeDefault
ContentIdrbxasset://textures/ui/Scroll/scroll-bottom.png

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.

History 7

BottomImageContent

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

Diagram showing the three image asset elements which construct a scrolling frame's scroll bar.

History 3

CanvasPosition

TypeDefault
Vector20, 0

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.

History 6

CanvasSize

TypeDefault
UDim2{0, 0}, {2, 0}

Determines the size of the scrollable area. For an adaptive alternative based on the overall size of children within the ScrollingFrame, consider using AutomaticCanvasSize.

History 6

ClearInertialScrolling

Parameters (0)
No parameters.
Returns (1)
null

History 3

ElasticBehavior

TypeDefault
ElasticBehaviorWhenScrollable

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

History 6

GetSampledInertialVelocity

Parameters (0)
No parameters.
Returns (1)
Vector2

History 2

GetScrollVelocity

Parameters (0)
No parameters.
Returns (1)
Vector2

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.

History 1

HorizontalScrollBarInset

TypeDefault
ScrollBarInsetNone

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.

  • None — the canvas is never inset; content may be obscured behind the horizontal scroll bar when it is visible.
  • ScrollBar — the canvas is inset only while the horizontal scroll bar is visible.
  • Always — the canvas is always inset regardless of whether the horizontal scroll bar is visible.

History 6

MidImage

TypeDefault
ContentIdrbxasset://textures/ui/Scroll/scroll-middle.png

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.

History 7

MidImageContent

TypeDefault
Content

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.

History 3

ResetScrollVelocity

Parameters (0)
No parameters.
Returns (1)
null

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

History 1

ScrollBarImageColor3

TypeDefault
Color31, 1, 1

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.

History 6

ScrollBarImageTransparency

TypeDefault
float0

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

History 6

ScrollBarThickness

TypeDefault
int12

Thickness of the scroll bar in pixels; applies to both horizontal and vertical scroll bars. If set to 0, no scroll bars are rendered.

History 6

ScrollToTop

Parameters (0)
No parameters.
Returns (1)
null

History 3

ScrollingDirection

TypeDefault
ScrollingDirectionXY

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.

History 6

ScrollingEnabled

TypeDefault
booltrue

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

History 6

TopImage

TypeDefault
ContentIdrbxasset://textures/ui/Scroll/scroll-top.png

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.

History 7

TopImageContent

TypeDefault
Content

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.

History 3

VerticalScrollBarInset

TypeDefault
ScrollBarInsetNone

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.

  • None — the canvas is never inset; content may be obscured behind the vertical scroll bar when it is visible.
  • ScrollBar — the canvas is inset only while the vertical scroll bar is visible.
  • Always — the canvas is always inset regardless of whether the vertical scroll bar is visible.

History 6

VerticalScrollBarPosition

TypeDefault
VerticalScrollBarPositionRight

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

History 6

Removed members 2

AutoSizeCanvas

TypeDefault
bool

History 6

AutoSizeCanvasPadding

TypeDefault
UDim2

History 6

Settings