ScrollingFrame
The ScrollingFrame is a special Frame that handles all scrolling for you, with a range of different ways to customize how the scrolling works.
Summary
Properties
The size in offsets of the area that is scrollable.
The size in offsets of the frame, without the scrollbars.
Determines whether ScrollingFrame.CanvasSize is resized based on child content.
The Down image on the vertical scrollbar. Size of this is always ScrollBarThickness by ScrollBarThickness. This is also used as the image on the horizontal scroll bar.
The location within the canvas, in offsets, that should be drawn at the top left of the scroll frame.
Determines the size of the area that is scrollable. The UDim2 is calculated using the parent gui's size, similar to the regular Size property on gui objects.
Determines how elastic scrolling behaves for touch input.
Indicates the inset behavior of the horizontal scrolling bar.
The middle image on the vertical scrollbar. The size of this can vary in the y direction, but is always set as ScrollingFrame.ScrollBarThickness in the x direction. This is also used as the middle image on the horizontal scroll bar.
Determines how a rendered scroll bar image will be colorized.
Determines the transparency of the rendered scroll bar image.
How thick the scroll bar appears. This applies to both the horizontal and vertical scroll bars. If set to 0, no scroll bars are rendered.
Determines the direction scrolling is allowed in this scrolling frame.
Determines whether or not scrolling is allowed on the frame. If false, no scroll bars will be rendered.
The Up image on the vertical scrollbar. The size of this is always ScrollBarThickness by ScrollBarThickness. This is also used as the left image on the horizontal scroll bar.
Indicates the inset behavior of the vertical scrolling bar.
Indicates the side that the vertical scrollbar will be located at.
Methods
Events
Properties
AbsoluteWindowSize
The size in offsets of the frame, without the scrollbars.
AutomaticCanvasSize
This property is used to automatically size parent UI objects based on the size of its descendants. Developers can use this property to dynamically add text and other content to a UI object at edit or run time, and the size will adjust to fit that content.
When AutomaticCanvasSize is set to an Enum.AutomaticSize value to anything other than None, ScrollingFrame.CanvasSize may resize depending on its child content.
BottomImage
The Down image on the vertical scrollbar. Size of this is always ScrollBarThickness by ScrollBarThickness. This is also used as the image on the horizontal scroll bar.
CanvasPosition
The location within the canvas, in offsets, that should be drawn at the top left of the scroll frame
CanvasSize
Determines the size of the area that is scrollable. The UDim2 is calculated using the parent gui's size, similar to the regular Size property on gui objects.
ElasticBehavior
This property determines when elastic scrolling is allowed. It can be used to dictate if and when the ScrollingFrame canvas is elastic. Defaults to WhenScrollable.
What's the Differences Between Elastic and Non-Elastic
Elastic
The image below demonstrates Enum.Elasticity.Always an Enum.Elasticity.WhenScrollable when the canvas is scrollable:
Non-Elastic
The image below demonstrates Enum.Elasticity.Never:
Enums
It can be set to several ElasticBehavior enum values, which determine how elastic scrolling behaves:
| Name | Description |
|---|---|
| Always | Regardless of scrolling, you can always move the canvas a bit outside the bounds |
| Never | You can never move the canvas outside the rect bounds |
| WhenScrollable | (default) Elastic scrolling is allowed when canvas size is larger than the rect size |
See also:
- ScrollingFrame.ScrollingDirection, the direction scrolling is allowed in this scrolling frame
HorizontalScrollBarInset
Indicates the inset behavior of the horizontal scrolling bar.
MidImage
The middle image on the vertical scrollbar. The size of this can vary in the y direction, but is always set as ScrollingFrame.ScrollBarThickness in the x direction. This is also used as the middle image on the horizontal scroll bar.
ScrollBarImageColor3
Determines how a scrolling bar image is colorized. When set to white, no colorization occurs. This property is very useful for reusing image assets: If the source image is completely white with transparency, you can set the entire color of the image at once with this property.
ScrollBarImageTransparency
Determines the alpha of a scroll bar's rendered image. A value of 0 is completely opaque, and a value of 1 is completely transparent (invisible). This property behaves similarly to GuiObject.BackgroundTransparency or BasePart.Transparency.
ScrollBarThickness
How thick the scroll bar appears. This applies to both the horizontal and vertical scroll bars. If set to 0, no scroll bars are rendered.
ScrollingDirection
This property determines the direction scrolling is allowed. If scrolling is disallowed in a direction, the scrollbar will not appear. Defaults to XY.
What are the Different Scrolling Directions
XY (Default)
The image below demonstrates Enum.ScrollingDirection.XY:
X
The image below demonstrates Enum.ScrollingDirection.X:
Y
The image below demonstrates Enum.ScrollingDirection.Y:
Enums
It can be set to several ScrollingDirection enum values, which determine how elastic scrolling behaves:
| Name | Description |
|---|---|
| XY | (default) Canvas can be scrolled along both X and Y axes |
| X | Canvas can only be scrolled along the X axis |
| Y | Canvas can only be scrolled along the Y axis |
See also:
- ScrollingFrame.ElasticBehavior, how elastic scrolling behaves for touch input
ScrollingEnabled
Determines whether or not scrolling is allowed on the frame. If false, no scroll bars will be rendered.
TopImage
The Up image on the vertical scrollbar. The size of this is always ScrollBarThickness by ScrollBarThickness. This is also used as the left image on the horizontal scroll bar.
VerticalScrollBarInset
Indicates the inset behavior of the vertical scrolling bar.
VerticalScrollBarPosition
Indicates the side that the vertical scrollbar will be located at.