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
726AbsoluteCanvasSize: Vector2
726AbsoluteWindowSize: Vector2
726AutomaticCanvasSize: AutomaticSize
726BottomImage: ContentId
726BottomImageContent: Content
726CanvasPosition: Vector2
726CanvasSize: UDim2
726ElasticBehavior: ElasticBehavior
726HorizontalScrollBarInset: ScrollBarInset
726MidImage: ContentId
726MidImageContent: Content
726ScrollBarImageColor3: Color3
726ScrollBarImageTransparency: float
726ScrollBarThickness: int
726ScrollingDirection: ScrollingDirection
726ScrollingEnabled: bool
726TopImage: ContentId
726TopImageContent: Content
726VerticalScrollBarInset: ScrollBarInset
726VerticalScrollBarPosition: VerticalScrollBarPosition
573ClearInertialScrolling(): null
462GetSampledInertialVelocity(): Vector2
703GetScrollVelocity(): Vector2
703ResetScrollVelocity(): null
573ScrollToTop(): null
inherited from GuiObject
726Active: bool
726AnchorPoint: Vector2
726AutomaticSize: AutomaticSize
726BackgroundColor3: Color3
726BackgroundTransparency: float
726BorderColor3: Color3
726BorderMode: BorderMode
726BorderSizePixel: int
726ClipsDescendants: bool
726Draggable: bool
726GuiState: GuiState
726InputSink: InputSink
726Interactable: bool
726LayoutOrder: int
726NextSelectionDown: GuiObject
726NextSelectionLeft: GuiObject
726NextSelectionRight: GuiObject
726NextSelectionUp: GuiObject
726Position: UDim2
726Rotation: float
726Selectable: bool
726SelectionImageObject: GuiObject
726SelectionOrder: int
726Size: UDim2
726SizeConstraint: SizeConstraint
726Visible: bool
726ZIndex: 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
726AbsolutePosition: Vector2
726AbsoluteRotation: float
726AbsoluteSize: Vector2
726AutoLocalize: bool
726RootLocalizationTable: LocalizationTable
726SelectionBehaviorDown: SelectionBehavior
726SelectionBehaviorLeft: SelectionBehavior
726SelectionBehaviorRight: SelectionBehavior
726SelectionBehaviorUp: SelectionBehavior
726SelectionGroup: bool
525SelectionChanged(amISelected: bool, previousSelection: GuiObject, newSelection: GuiObject)
inherited from Instance
726Archivable: bool
726Capabilities: SecurityCapabilities
726IsInSandbox: bool
726Name: string
726Parent: Instance
726PredictionMode: PredictionMode
726Sandboxed: bool
726UniqueId: 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
726children(): Instances
726clone(): Instance
726destroy(): null
726findFirstChild(name: string, recursive: bool = false): Instance
726getChildren(): Instances
726isDescendantOf(ancestor: Instance): bool
726remove(): null
462AncestryChanged(child: Instance, parent: Instance)
462AttributeChanged(attribute: string)
462ChildAdded(child: Instance)
462ChildRemoved(child: Instance)
462DescendantAdded(descendant: Instance)
462DescendantRemoving(descendant: Instance)
500Destroying()
657StyledPropertiesChanged()
726childAdded(child: Instance)
inherited from Object
726ClassName: string
726className: string
647GetPropertyChangedSignal(property: string): RBXScriptSignal
647IsA(className: string): bool
726isA(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 149

Members 32

AbsoluteCanvasSize

TypeDefault
Vector2

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 11

Tags: [ReadOnly, NotReplicated]

AbsoluteWindowSize

TypeDefault
Vector2

The size of the frame, in offsets, without the scroll bars.

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 4

Tags: [ReadOnly, NotReplicated]

AutomaticCanvasSize

TypeDefault
AutomaticSize

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 5

BottomImage

TypeDefault
ContentId

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 6

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

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

History 2

CanvasPosition

TypeDefault
Vector2

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 5

CanvasSize

TypeDefault
UDim2

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 5

ClearInertialScrolling

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

History 3

ElasticBehavior

TypeDefault
ElasticBehavior

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

History 5

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
ScrollBarInset

Indicates whether CanvasSize is inset by ScrollBarThickness on the horizontal axis.

History 5

MidImage

TypeDefault
ContentId

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 6

MidImageContent

TypeDefault
Content

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 2

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
Color3

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 5

ScrollBarImageTransparency

TypeDefault
float

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 5

ScrollBarThickness

TypeDefault
int

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 5

ScrollToTop

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

History 3

ScrollingDirection

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

History 5

ScrollingEnabled

TypeDefault
bool

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

History 5

TopImage

TypeDefault
ContentId

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 6

TopImageContent

TypeDefault
Content

History 2

VerticalScrollBarInset

TypeDefault
ScrollBarInset

Indicates whether CanvasSize is inset by ScrollBarThickness on the vertical axis.

History 5

VerticalScrollBarPosition

TypeDefault
VerticalScrollBarPosition

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

History 5

Removed members 2

AutoSizeCanvas

TypeDefault
bool

History 6

AutoSizeCanvasPadding

TypeDefault
UDim2

History 6

Settings