ScrollingFrame

Show Deprecated

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.

READ ONLY
NOT REPLICATED

The size in offsets of the frame, without the scrollbars.

READ ONLY
NOT REPLICATED

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

AbsoluteCanvasSize

Read Only
Not Replicated

The size in offsets of the area that is scrollable.

AbsoluteWindowSize

Read Only
Not Replicated

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:

Enum.Elasticity.Always

Non-Elastic

The image below demonstrates Enum.Elasticity.Never: Enum.Elasticity.Never

Enums

It can be set to several ElasticBehavior enum values, which determine how elastic scrolling behaves:

NameDescription
AlwaysRegardless of scrolling, you can always move the canvas a bit outside the bounds
NeverYou 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:

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:

Enum.ScrollingDirection.XY

X

The image below demonstrates Enum.ScrollingDirection.X:

Enum.ScrollingDirection.X

Y

The image below demonstrates Enum.ScrollingDirection.Y:

Enum.ScrollingDirection.Y

Enums

It can be set to several ScrollingDirection enum values, which determine how elastic scrolling behaves:

NameDescription
XY(default) Canvas can be scrolled along both X and Y axes
XCanvas can only be scrolled along the X axis
YCanvas can only be scrolled along the Y axis

See also:

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.

Methods

Events