Make ScrollingFrame automatically scroll when text goes off frame

Hello devs! So I am working on Radio system for my game and I want my ScrollingFrame to automatically scroll when text goes off frame.

Not exactly sure what you mean. Could you please be a bit more specific or provide screenshots? Thanks!

1 Like

what you can do is make a while loop and see if the text bounds are out of the UI’s absolutesize and then use mafs to calculate canvas position

what he wants to do is make a scrolling frame scroll if a descendent goes off the scrolling frame

ok thanks

you can keep checking until it goes off the ScrollingFrame

Hello there,

U could try this youtube tutorial! It looks kinda easy but I think this is what u mean.

Kind regards,
DutchBuilds.

OK I am gonna check it out. If it works I am gonna mark your answer as solution.

Alright! Goodluck with working on it.

I didn’t mean like text scrolling, I meant to make ScrollingFrame automatically scroll down when something goes off the frame, like a chat.

For like a custom chat? Or just the classic ROBLOX Chat?

1 Like

It’s for radio, or walkie-talkie, when you equip it gui pops up with list of things people said in radio.

You just need to use CanvasPosition property in scrolling frame ,I made several auto scrool scrolling frames so try to check with that property

Be sure to check if the player is already scrolled all the way down, you don’t want them scrolling and a new message appears you don’t want it kicking them to the bottom of the frame

1 Like

Have you got any examples please because I’m stuck, here is (part) my code :

script.Parent.RadioChat.Chat.DescendantAdded:Connect(function(i)
	if i:IsA("TextLabel") then
		local bottom = script.Parent.RadioChat.Chat.AbsolutePosition.Y * 0.58
		if i.AbsolutePosition.Y > bottom then
			script.Parent.RadioChat.Chat.CanvasPosition = Vector2.new(0,i.AbsolutePosition.Y * 0.435)
		end
	end
end)

See how much each textlabel takes up:

Example:
At first its CanvasPosition(0,0)
Now scroll until your gui object totally becomes impossible to see it
Now see the difference in canvas position

In simple words:

First keep make your textlabel:
image
CanvasPosition(0,0)

Step 2

Now scroll until your textlabel is totally impossible to see


Now notice the change in canvas position

Step 3 : Finding difference of CanvasPosition

Starting of textlabel = (0,0)
Ending of textlabel = (0,125)

Now what you understood is, the gui object takes 125 pixels tall

Now thats the constant we want now

Now, if you add 125 to canvas position you go to the next textlabel position

So basically:
(0,0) First textlabel is seen/focused now
(0,125) Second is seen, as 125 pixels is now added, the first textlabel goes up and second becomes visible

Similarly
(0,250) Third textlabel is seen/focused now
(0,375) Fourth textlabel is seen/focused now
(0,500) Fifth textlabel is seen/focused now

Now coming back to the question you’ve asked:
You use absolute position to get the position of an object on the player screen, but thats not what we want now

We replace the absolute position with the number of objects the scrolling frame have and multiply it with 125

How that works?
Now if you have 2 textlabels, you get 0,300 as the canvas position but both the textlabels wont be seen as 150 x 2 = 300, we only keep 150, in other words we subtract 1 time the value of each gui object size in pixels on scrolling frame

Now keep 10 text labels, and you want to focus the 9th textlabel
This is how you do:

local numberofguiobjects = #scrollingframe:GetChildren()
local textlabel_to_focus = 9
local toadd = (9 - 2) *150 -- 7 * 150 = 1050
canvaspostion = Udim.new(0,toadd)

Vector3 is used to define a vector quantity like x,y,z
But this is gui, it supports Udim2 or Udim

There are some aspects where vector 3 is used even in gui but its rarely used

Now in your script do the same:

script.Parent.RadioChat.Chat.DescendantAdded:Connect(function(i)
	if i:IsA("TextLabel") then
		local bottom = script.Parent.RadioChat.Chat.AbsolutePosition.Y * 0.58
		if i.AbsolutePosition.Y > bottom then
			script.Parent.RadioChat.Chat.CanvasPosition = Udim.new(0,#scrollingframe:GetChildren() * 0.435)
		end
	end
end)

However this is not meant for copy paste, its just an idea to tell you how it works

If you still need help in this topic, feel free to tell me
Woodx

Also vector 2 is often used for mouse position where its 2 vectors
x,y

However, I suggest you to check these articles:
https://developer.roblox.com/en-us/api-reference/datatype/UDim
https://developer.roblox.com/en-us/api-reference/datatype/UDim2
https://developer.roblox.com/en-us/api-reference/datatype/Vector2
https://developer.roblox.com/en-us/api-reference/datatype/Vector3

And I’ve tested it on baseplate too:
Here’s some images
image
CanvasPosition = (0,(8 - 2)*125)
We need 8th frame and here the 8th textlabel appeared in the middle

That’s how it works:


Attempting to add 130, instead of 125, will result in a bit less accurate presentation

image

2 Likes

Also absoluted size refers to the pixels of the players current camera

To get it you need to do: workspace.CurrentCamera.ViewportSize
Each player will have a different viewport size, so it isnt recommended to use absolute size for scrolling frame, when your going for large/moderate stuff

You could go for ratios, but thats too hard and it will confuse basic/moderate scripts, its better to go with pixels for gui rather than viewport size pixels