ScrollingFrame

ScrollingFrame : GuiObject

Overview

ScrollingFrame is a UI container that can be used to automatically provide horizontal or vertical scroll when UI element placed inside overflows display area. It is especially useful when many items such as inventory and quest list need to be neatly displayed on single screen. Many different scroll actions can be set depending on situation.

ScrollingFrame can be controlled only in client environment.

Properties

AbsoluteCanvasSize

Vector2

A read-only property that defines the total size of area scrollable by user.

Code Samples

local ScreenGui = script.Parent
local ScrollingFrame = ScreenGui:WaitForChild("ScrollingFrame")

wait(2)
print(ScrollingFrame.AbsoluteCanvasSize)

AbsoluteWindowSize

Vector2

A read-only property that defines the actual size of display area not including scroll bar area.

Code Samples

local ScreenGui = script.Parent
local ScrollingFrame = ScreenGui:WaitForChild("ScrollingFrame")

print(ScrollingFrame.AbsoluteWindowSize)

AutomaticCanvasSize

Enum.AutomaticSize

A property that can be used to automatically adjust CanvasSize depending on the actual size of the content inside ScrollingFrame.

If AutomaticSize is not None, AbsoluteCanvasSize is calculated based on the actual size of internal UI elements according to a specified direction and updated automatically.

Code Samples

local ScreenGui = script.Parent
local ScrollingFrame = ScreenGui:WaitForChild("ScrollingFrame")

ScrollingFrame.AutomaticCanvasSize = Enum.AutomaticSize.XY

CanvasPosition

Vector2

A property that can be used to specify the current position of canvas in ScrollingFrame in pixel.

Scroll bar will be moved to an appropriate position according to set value.

Code Samples

local ScreenGui = script.Parent
local ScrollingFrame = ScreenGui:WaitForChild("ScrollingFrame")

ScrollingFrame.CanvasPosition = Vector2.new(0, 210)

CanvasSize

UDim2

Specifies the size of the entire area that user can move with scrolls.

If scroll threshold needs to be automatically calculated according to the quantity of internal content, AutomaticCanvasSize can be used.

In addition, if AutomaticCanvasSize is enabled while the CanvasSize value is specified manually and the manually specified CanvasSize value is greater than automatically calculated size, the manually specified value takes precedence of automatically calculated size.

Code Samples

local ScreenGui = script.Parent
local ScrollingFrame = ScreenGui:WaitForChild("ScrollingFrame")

ScrollingFrame.CanvasSize = UDim2.new(0, 0, 0, 400)

ScrollBarImageColor3

Color3

Specifies the color of scroll bar image.

If this value is white, original image will be displayed without any color correction.

Code Samples

local ScreenGui = script.Parent
local ScrollingFrame = ScreenGui:WaitForChild("ScrollingFrame")

ScrollingFrame.ScrollBarImageColor3 = Color3.fromRGB(255, 0, 0)

ScrollBarImageTransparency

number

Specifies the transparency of scroll bar image.

0 means the image is completely opaque while 1 means the image is totally invisible.

Code Samples

local ScreenGui = script.Parent
local ScrollingFrame = ScreenGui:WaitForChild("ScrollingFrame")

ScrollingFrame.ScrollBarImageTransparency = 0.3

ScrollBarThickness

number

Specifies the width of scroll bar in pixel.

Code Samples

local ScreenGui = script.Parent
local ScrollingFrame = ScreenGui:WaitForChild("ScrollingFrame")

ScrollingFrame.ScrollBarThickness = 30

ScrollingDirection

Enum.ScrollingDirection

Specifies in which direction user can scroll content.

Scroll bar is generated only for the selected direction.

Code Samples

local ScreenGui = script.Parent
local ScrollingFrame = ScreenGui:WaitForChild("ScrollingFrame")

ScrollingFrame.ScrollingDirection = Enum.ScrollingDirection.Y

ScrollingEnabled

bool

Specifies whether to allow scroll action.

If scroll is disabled, scroll bar is not displayed and user cannot scroll content.

Code Samples

local ScreenGui = script.Parent
local ScrollingFrame = ScreenGui:WaitForChild("ScrollingFrame")

ScrollingFrame.ScrollingEnabled = false

Methods

MoveToSlot

A method that can be used to move scrolls so that the UI element in a specified slot index position comes inside the display area of ScrollingFrame.

slotIndex is decided not by hierarchy order, but the sort (display) order on actual screen.

Parameters

unumber32 SlotIndex	The index value that represents the display (sort) order of the slot to become the reference point for scroll movement.

Return

void

Code Samples

local ScreenGui = script.Parent
local ScrollingFrame = ScreenGui:WaitForChild("ScrollingFrame")

ScrollingFrame:MoveToSlot(3)

Events

See also

GUI