Scrolling Frame Tutorial

ScrollingFrameExample.gif

A ScrollingFrame is setup much in the same way a regular Frame is. Add a ScreenGui to the StarterGui in your place, and then insert a ScrollingFrame.

  • Tree-collapse.png
    StarterGui
    StarterGui
    • Tree-collapse.png
      ScreenGui
      ScreenGui
      • ScrollingFrame
        ScrollingFrame
  • The position of the ScrollingFrame is set with its Position property which is a UDim2.
  • Likewise, the size of the ScrollingFrame is set in the Size property which is also a UDim2. Note that a ScrollingFrame may have a scrollbar which takes up some of this size
  • If you need to know how big the actual viewing area is in a ScrollingFrame you can access it using the read-only property AbsoluteWindowSize.
  • If scroll bars are shown, their thickness is determined by the ScrollBarThickness property.
  • The area inside of a ScrollingFrame is called a canvas. The CanvasSize property determines how large the total canvas is. If one of the dimensions of the Canvas is wider than the size of the ScrollingFrame, then the corresponding scroll bar is shown. Otherwise the scroll bar is hidden.
  • The CanvasPosition defines the default position of the scroll bars (in pixels) when the frame is shown. Note this property won't do anything if the scrollbars are not shown.

Customizing scrollbars[edit]

The bar in a ScrollerFrame can be customized. The bar itself is composed of three images: a top, middle and bottom. The horizontal and vertical bars use the same images (the horizontal bar rotates the images from the vertical bar 90 degrees counter-clockwise).

The images in the scroll bar are scaled based on the property ScrollBarThickness. The top and bottom images are always square with both width and height equal to the thickness of the bar. The middle image will always have the thickness of the scroll bar, but the length will be scaled based on the frame size and the canvas size.

It scales so the ratio of the length of the bar to the length of the trough equals the size of the canvas to the size of the frame.

To use custom images, upload the three images you want to use as decals. It is recommended to use images that will scale well, particularly the middle image which needs to stretch. Then, in the Properties of the ScrollingFrame, change the BottomImage, MidImage, and TopImage to the appropriate urls.

ScrollingFrameProperties.png

Example[edit]

This example will create a ScrollingFrame containing four ImageLabels, one in each corner. Note how it uses custom assets for the scrollbar:

Select
-- In a LocalScript in StarterGui:
 
-- Create ScreenGui
local screenGui = Instance.new("ScreenGui")
screenGui.Parent = script.Parent
 
-- Create ScrollingFrame
local scrollingFrame = Instance.new("ScrollingFrame")
scrollingFrame.Position = UDim2.new(0.2, 0, 0.1, 0)
scrollingFrame.Size = UDim2.new(0, 200, 0, 100)
scrollingFrame.CanvasSize = UDim2.new(0, 600, 2, 0)
scrollingFrame.BackgroundColor3 = BrickColor.White().Color
scrollingFrame.BottomImage = "rbxassetid://156476249"
scrollingFrame.MidImage = "rbxassetid://156476256"
scrollingFrame.TopImage = "rbxassetid://156476261"
scrollingFrame.Parent = screenGui
 
-- Create images to put in ScrollingFrame
local topLeftImage = Instance.new("ImageLabel")
topLeftImage.Position = UDim2.new(0, 0, 0, 0)
topLeftImage.Size = UDim2.new(0, 100, 0, 100)
topLeftImage.BackgroundColor3 = Color3.new(255/255, 162/255, 116/255)
topLeftImage.ZIndex = 2
topLeftImage.ImageTransparency = 0.5
topLeftImage.Image = "rbxassetid://133293265"
topLeftImage.Parent = scrollingFrame
 
local topRightImage = Instance.new("ImageLabel")
topRightImage.Position = UDim2.new(1, -100, 0, 0)
topRightImage.Size = UDim2.new(0, 100, 0, 100)
topRightImage.BackgroundColor3 = Color3.new(255/255, 190/255, 216/255)
topRightImage.ZIndex = 2
topRightImage.ImageTransparency = 0.5
topRightImage.Image = "rbxassetid://133293265"
topRightImage.Parent = scrollingFrame
 
local bottomLeftImage = Instance.new("ImageLabel")
bottomLeftImage.Position = UDim2.new(0, 0, 1, -100)
bottomLeftImage.Size = UDim2.new(0, 100, 0, 100)
bottomLeftImage.BackgroundColor3 = Color3.new(28/255, 255/255, 180/255)
bottomLeftImage.ZIndex = 2
bottomLeftImage.ImageTransparency = 0.5
bottomLeftImage.Image = "rbxassetid://133293265"
bottomLeftImage.Parent = scrollingFrame
 
local bottomRightImage = Instance.new("ImageLabel")
bottomRightImage.Position = UDim2.new(1, -100, 1, -100)
bottomRightImage.Size = UDim2.new(0, 100, 0, 100)
bottomRightImage.BackgroundColor3 = Color3.new(28/255, 69/255, 255/255)
bottomRightImage.ZIndex = 2
bottomRightImage.ImageTransparency = 0.5
bottomRightImage.Image = "rbxassetid://133293265"
bottomRightImage.Parent = scrollingFrame

Sample Place[edit]

Here you can find a sample of a ScrollingFrame. The place is not copy locked, so feel free to edit it to see the settings that are used.