Trying to make a render scrollbar on top of real ScrollingFrame

Help and Feedback Scripting Support
#1

Hi, so I’m trying to make a “custom” ScrollingFrame, while still using the one Roblox provides.

Mainly because, the custom scroll bar image I put in for the ScrollingFrame got super blurry and messed up, so what I decided to do was render an image that appears in the same location as the scroller bar in the frame, but it’s just for display purposes, and I’d obviously hide the real one.

I’m trying to figure out the logic in order to do this. I’ve defined a maximum Y for the fake scroll bar, which would be the position for it when the scroller is all the way at the bottom.

Not exactly sure how to put the pieces together, here’s what I came up with so far:

local scroller = script.Parent:WaitForChild("ScrollingFrame")
local bar = script.Parent:WaitForChild("Bar")

local start_Y = bar.Position.Y.Scale
local max_Y = start_Y + math.abs(bar.Size.Y.Scale - scroller.Size.Y.Scale)

scroller.Changed:Connect(function()
	
	local canvas_scale = (scroller.CanvasPosition.Y + scroller.AbsoluteWindowSize.Y) / scroller.CanvasSize.Y.Offset
	
	local Y --// ???
	
	bar.Position = UDim2.new(bar.Position.X.Scale, 0, Y, 0)
end)

Any help is appreciated. Thanks :slight_smile:

2 Likes
#2

Did you change the quality of it by enlarging/shrinking it?

1 Like
#3

Yeah. It just wasn’t possible to import the scroller bar image into the default ScrollingFrame slider.

:frowning:

#4

I figured it out!

If anyone’s curious, here’s my code:

local scroller = script.Parent:WaitForChild("ScrollingFrame")
local container = script.Parent
local bar = script.Parent:WaitForChild("Bar")

scroller.Changed:Connect(function()
	
	local canvas_scale = scroller.CanvasPosition.Y / (scroller.CanvasSize.Y.Offset - scroller.AbsoluteWindowSize.Y)
	local Y = (1 - bar.Size.Y.Scale) * canvas_scale
	
	bar.Position = UDim2.new(bar.Position.X.Scale, 0, Y, 0)
end)
3 Likes
#5

do you know how tomake the srolling frame scroll by the position of the “bar”?

#6 
--//Gets the scale of "bar", then sets the "CanvasPosition" based on the "CanvasSize"
bar:GetPropertyChangedSignal('AbsolutePosition'):Connect(function()
    local barsz = bar.AbsoluteSize;
    local barpos = bar.AbsolutePosition;
    local scrollsz = scroller.AbsoluteWindowSize;
    local scrollpos = scroller.AbsolutePosition;
    local scl = ((barpos.Y-scrollpos.Y) * (barsz.Y/scrollsz.Y)) / barsz.Y;

    scroller.CanvasPosition = scl * scroller.AbsoluteCanvasSize.Y;
end);