How to automatically adjust Scrolling Frame's Canvas Position as children are added?

The Roblox Chat’s (Scrolling Frame’s) Canvas Position automatically adjusts every time people chat (i.e, frames are added to the scrolling frame).
Any idea how this is done?

Meanwhile, I’ll look into the core Roblox chat scripts to look into this.
Replies will be greatly appreciated.

This is in the scripting category because it involves scripting. Besides, the art category is so inactive

1 Like

Usually, you’d use some kind of UILayout in the scrolling frame, and have a LocalScript listen to changes to it’s AbsoluteContentSize.
Here’s an an example, which I use a lot:

-- parented to a UIListLayout which is parented to a ScrollingFrame.
script.Parent.Parent.CanvasSize = UDim2.new(1, 0, 0, script.Parent.AbsoluteContentSize.Y)
script.Parent:GetPropertyChangedSignal("AbsoluteContentSize"):Connect(function()
	script.Parent.Parent.CanvasSize = UDim2.new(1, 0, 0, script.Parent.AbsoluteContentSize.Y)
end)

(You’ll have to change the sizes a little to match your needs.)

2 Likes

I appreciate your reply. However, you’re answering a completely different question.
I understand this is the method used to scale the canvas size according to the scrolling frames children

By canvas position, I mean, let’s say, when you chat in Roblox, the chat automatically scrolls down and you don’t have to scroll down yourself to see the currently added child(message)

Ah, that could be achieved in the same script.

-- parented to a UIListLayout which is parented to a ScrollingFrame.
script.Parent.Parent.CanvasPosition = UDim2.new(1, 0, 0, script.Parent.AbsoluteContentSize.Y - script.Parent.Parent.AbsoluteSize.Y)
script.Parent:GetPropertyChangedSignal("AbsoluteContentSize"):Connect(function()
	script.Parent.Parent.CanvasPosition = UDim2.new(1, 0, 0, script.Parent.AbsoluteContentSize.Y - script.Parent.Parent.AbsoluteSize.Y)
end)

This should work, but the math may be wrong.
It’s still just a matter of listening to a change, whether it be a child GUI being added or the AbsoluteContentSize being changed, and manipulating the position according to that.

5 Likes

Thankfully, it actually worked :smile:
(also, the problem in your code is that, 2d position is a vector :smile:)
Here is the function I used (for future reference)

local function UpdateCanvasPosition()
	ChatLog.CanvasPosition = Vector2.new(0, UiListLayout.AbsoluteContentSize.Y)
end 
UiListLayout:GetPropertyChangedSignal("AbsoluteContentSize"):Connect(UpdateCanvasPosition)

EDIT: fixed some typos
Thanks again!

12 Likes