A ScrollingFrame consists of a customizable canvas and scroll bars with built‑in scrolling interactivity and different ways to customize how the scrolling works. ScrollingFrame is ideal for displaying a lot of information in a confined space and it works well with list and grid layouts.
Canvas
The canvas is the primary area of a ScrollingFrame that can contain other GuiObjects. Scrolling behavior automatically adapts in the following scenarios:
| Frame Setup | Result |
|---|---|
| The frame's CanvasSize is taller than its overall height; specifically the total CanvasSize.Y exceeds the total Size.Y. | Vertical scrolling is enabled and a vertical scroll bar appears. |
| The frame's CanvasSize is wider than its overall width; specifically the total CanvasSize.X exceeds the total Size.X. | Horizontal scrolling is enabled and a horizontal scroll bar appears. |
| The frame's AutomaticCanvasSize is set to Y or XY and the total height of its contents (child GuiObjects) exceed its total Size.Y. | Vertical scrolling is enabled and a vertical scroll bar appears. |
| The frame's AutomaticCanvasSize is set to X or XY and the total width of its contents (child GuiObjects) exceed its total Size.X. | Horizontal scrolling is enabled and a horizontal scroll bar appears. |
The CanvasPosition property reflects the current positional offset of the canvas within the frame, in pixels, and it sets the position of scroll bars accordingly. Note that this property doesn't do anything if scroll bars aren't visible.
Insets
A scrolling frame's CanvasSize may be affected by the VerticalScrollBarInset and/or HorizontalScrollBarInset properties. In the following example diagram, a vertically scrolling frame uses a canvas width of 100%. With VerticalScrollBarInset set to None (default), the canvas extends to the full width of the scrolling frame, obscuring a slight amount of content under the scroll bar. In contrast, a VerticalScrollBarInset setting of either Always or ScrollBar insets the canvas by the ScrollBarThickness amount so that the canvas meets edge‑to‑edge with the scroll bar.
Scroll bars
The frame's scroll bars reflect the current canvas position and provide automatic drag‑to‑scroll interactivity. For vertical scroll bars, the VerticalScrollBarPosition property switches the bar's position to either the left or right of the canvas, but horizontal scroll bars can only be positioned below the canvas.
Scroll bar construction consists of three asset properties:
- TopImage — 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).
- MidImage — Spans the area between TopImage and BottomImage (rotated 90° counterclockwise for a horizontal scroll bar).
- BottomImage — 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).
Each image scales based on the ScrollBarThickness property which changes the width of a vertical scroll bar or the height of a horizontal scroll bar.
Additional visual modifications can be made through the ScrollBarImageColor3 and ScrollBarImageTransparency properties which tint the bar's image assets and modify its opacity, respectively.
Elasticity
By default, ScrollingFrames exhibit elastic scrolling behavior on touch‑enabled devices, meaning that users can drag the canvas slightly further than its bounds and, upon release, the canvas will spring back to its minimum or maximum limit. If you want to remove the elastic behavior completely and ensure the canvas never scrolls past its limits, set the ElasticBehavior property to Never.