How can I make custom scrolling bar

[rok000111]

You can write your topic however you want, but you need to answer these questions:

1. What do you want to achieve? I have an image for thumb and I want to use it instead of clasic thumb, are there any ways to do so?

2. What is the issue? I tried to make it work by just scripting it, but it have many isues with size of the area where thumb can go

3. What solutions have you tried so far? I tried to use buttom middle and top image to change thumb but I could not fully understand how it works and I am not sure how suitable such a solution is

Here is some screenshots how it looks

Here is the script I used for it

game.Players[tostring(game.Players.LocalPlayer)].PlayerGui:WaitForChild("Shopping (fixed)"):WaitForChild("Frame"):WaitForChild("Base"):WaitForChild("ScrollingFrame")

script.Parent.Parent.Parent.Parent.Parent.ScrollingFrame.CanvasPosition =  Vector2.new(0, 10000)
Max = script.Parent.Parent.Parent.Parent.Parent.ScrollingFrame.CanvasPosition.Y
script.Parent.Parent.Parent.Parent.Parent.ScrollingFrame.CanvasPosition =  Vector2.new(0, 0)

ScrollingFrame = script.Parent.Parent.Parent.Parent.Parent.ScrollingFrame
InitialSize = script.Parent.Parent.AbsoluteSize.Y
activated = 0
script.Parent.Parent.Parent.Size = UDim2.new(script.Parent.Parent.Parent.Size.X.Scale, 0, script.Parent.Parent.Parent.Size.Y.Scale, -script.Parent.Parent.AbsoluteSize.Y)
--Border
while script.Parent.Parent.AbsoluteSize.Y < InitialSize do
	script.Parent.Parent.Size = UDim2.new(script.Parent.Parent.Size.X.Scale, 0, script.Parent.Parent.Size.Y.Scale+0.001, 0)
	task.wait()	
end


local function ChangeSize ()
	script.Parent.Parent.Position = UDim2.new(script.Parent.Parent.Position.X.Scale,script.Parent.Parent.Position.Y.Offset, ScrollingFrame.CanvasPosition.Y/Max, 0)
	if script.Parent.Parent.AbsoluteSize.Y < InitialSize then
		activated+=1
		while script.Parent.Parent.AbsoluteSize.Y < InitialSize do
			script.Parent.Parent.Size = UDim2.new(script.Parent.Parent.Size.X.Scale, 0, script.Parent.Parent.Size.Y.Scale+0.001, 0)
			task.wait()
		end
	end
	if script.Parent.Parent.AbsoluteSize.Y > InitialSize then
		activated+=1
		while script.Parent.Parent.AbsoluteSize.Y > InitialSize do
			script.Parent.Parent.Size = UDim2.new(script.Parent.Parent.Size.X.Scale, 0, script.Parent.Parent.Size.Y.Scale-0.001, 0)
			task.wait()
		end
	end
end
local function ChangePoss()
	script.Parent.Parent.Position = UDim2.new(script.Parent.Parent.Position.X.Scale,script.Parent.Parent.Position.Y.Offset, ScrollingFrame.CanvasPosition.Y/Max, 0)
end

script.Parent.Parent.Parent.Parent.Parent:FindFirstChild("ScrollingFrame").Changed:Connect(function()
	ChangePoss()
	if activated~=0 then
		if pcall(ChangeSize) == true then
			--print(pcall(ChangePoss))
			ChangeSize()
		end
	end
end)

I`ll be really grateful for any kind of help!

Edited:
oh and sure there is also scrolling frame

[subto_deraxileonyt (Deraxile)]

Custom Scrollbar For original Roblox ScrollingFrame

Hello i was making an rpg inventory gui and i was wondering if it was possible to create a custom scrollbar for the original roblox scrolling frame, i am no where near to finding a solution

[rok000111]

Thanks! Yes I saw this post but the solution there is just to move the scrolling bar, it doesn’t say anything about how you can make it custom, exept using scroll bar images but from what i understand i have to split the image into 3 parts or something for that? Correct me if I’m wrong pls.

[subto_deraxileonyt (Deraxile)]

maybe… this? How to make a custom scrollbar GUI?

[rok000111]

Unfortunately, no, there is nothing there except a link to an article that I have already read and did not find a solution to my problem there(

[subto_deraxileonyt (Deraxile)]

@rok000111

I tried to make it work by just scripting it, but it have many isues with size of the area where thumb can go

could you describe it a lil bit more?

[rok000111]

as I showed in the video, the thumb scrolls down to somewhere in the 1/3 of the scrolling bar, but does not go further, because this is already the end of this Scrolling Frame, I also had some difficulties with the fact that the thumb does not go beyond the border of the frame it is in, like this:

but I fixed it with some crutch in the script

local function ChangeSize ()
	script.Parent.Parent.Position = UDim2.new(script.Parent.Parent.Position.X.Scale,script.Parent.Parent.Position.Y.Offset, ScrollingFrame.CanvasPosition.Y/Max, 0)
	if script.Parent.Parent.AbsoluteSize.Y < InitialSize then
		activated+=1
		while script.Parent.Parent.AbsoluteSize.Y < InitialSize do
			script.Parent.Parent.Size = UDim2.new(script.Parent.Parent.Size.X.Scale, 0, script.Parent.Parent.Size.Y.Scale+0.001, 0)
			task.wait()
		end
	end
	if script.Parent.Parent.AbsoluteSize.Y > InitialSize then
		activated+=1
		while script.Parent.Parent.AbsoluteSize.Y > InitialSize do
			script.Parent.Parent.Size = UDim2.new(script.Parent.Parent.Size.X.Scale, 0, script.Parent.Parent.Size.Y.Scale-0.001, 0)
			task.wait()
		end
	end
end

[rok000111]

well I just found a solution for the second problem without scripting…

[rok000111]

the truth is in brevity, and it is the truth
I found a way to make it with a changed script so here is the solution

Here is all parts of the gui, idk how else can I show them separately
Here is the final script:

game.Players[tostring(game.Players.LocalPlayer)].PlayerGui:WaitForChild("Shopping (fixed)"):WaitForChild("Frame"):WaitForChild("Base"):WaitForChild("ScrollingFrame")-- just so that it does not start working too soon
ScrollingFrame = game.Players.LocalPlayer.PlayerGui["Shopping (fixed)"].Frame.Base.ScrollingFrame
Thumb = script.Parent.Parent --Size
local function ChangePoss()
	Thumb.Position = UDim2.new(Thumb.Position.X.Scale,0,ScrollingFrame.CanvasPosition.Y/(ScrollingFrame.AbsoluteCanvasSize.Y-ScrollingFrame.AbsoluteWindowSize.Y), 0)
end
ScrollingFrame.Changed:Connect(ChangePoss)

--I`m using frame called Size because Image itself is a little bit too big so it is using just to sizes be more acurate.