Codectionary / Developer documentation / Luau

ScrollingFrame

Display a list that can scroll beyond the visible panel.

Why use ScrollingFrame?

ScrollingFrame clips and scrolls its contents. AutomaticCanvasSize can enlarge the scrollable area to fit children, making it useful for inventories or long menus.

Try it in Roblox Studio

Add a ScreenGui named PracticeGui to StarterGui and put this LocalScript inside it. Start a Studio client and scroll the resulting list.

Syntax

scroll.AutomaticCanvasSize = Enum.AutomaticSize.Y

Examples

ScrollingFrame

Create a small scrolling list of labels.

local screenGui = script.Parent
assert(screenGui:IsA("ScreenGui"))
local scroll = Instance.new("ScrollingFrame")
scroll.Size = UDim2.fromOffset(240, 120)
scroll.AutomaticCanvasSize = Enum.AutomaticSize.Y
scroll.CanvasSize = UDim2.fromOffset(0, 0)
scroll.Parent = screenGui

local layout = Instance.new("UIListLayout")
layout.Parent = scroll
for index = 1, 8 do
    local label = Instance.new("TextLabel")
    label.Size = UDim2.new(1, 0, 0, 32)
    label.Text = "Item " .. index
    label.Parent = scroll
end
  1. The frame’s height is 120 pixels, while eight labels require more vertical space.
  2. UIListLayout arranges the labels; AutomaticCanvasSize.Y expands the scrollable canvas to fit them.
  3. CanvasSize starts at zero so the automatic Y sizing determines the content extent.

Best practices

  • Test scrolling with mouse, touch and gamepad.
  • Keep list items large enough for touch interaction.

Runtime & versions

Luau host; Roblox engine examples require Roblox Studio. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

Luau documentation

Specifications & further reading