Cool ScrollingFrame trick (Replicate Roblox's Widget Scrollbar)

Yarik_superpro · May 12, 2025, 6:39pm

In this tutorial i will teach you how to replicate this scrollbar

I was trying to make UI for my plugin and tried to make it as close to roblox UI as possible and then i found work around to replicate it!

Code.luau

main

--!strict
local Main = script.Parent:WaitForChild("Main")::Frame
local Upper = Main:WaitForChild("Upper")::ImageButton
local Lower = Main:WaitForChild("Lower")::ImageButton
local Scroll = Main:WaitForChild("Scroll")::ScrollingFrame
local Background = Scroll:WaitForChild("Background")::Frame
local UILustLayout = Background:WaitForChild("UIListLayout")::UIListLayout
local Thickness = 0.015 --Thickness of scrollbar
local Button_SlideBy = Vector2.new(0,15)
local UDim2_one = UDim2.new(1,0,1,0)
local UDim2_Scaled = UDim2.new(1-Thickness,0,1,0)
Background.BorderSizePixel = 10 --This outline is needed because float calculation is not precise.

Lower.MouseButton1Click:Connect(function():()
	--Slide down
	Scroll.CanvasPosition+=Button_SlideBy
end)
Upper.MouseButton1Click:Connect(function():()
	--Slide down
	Scroll.CanvasPosition-=Button_SlideBy

This file has been truncated. show original

How does it work?

Scrollbar has 3 Components:

Top;
Middle;
Bottom;

We get are rid of all of them but Middle (i used custom texture tho)
And now we are setting background of our Scrollbar by setting BackgroundColor3 of ScrollingFrame to it.
Inside ScrollingFrame we create a frame and name it “Background” then make sure its Border3 color is the exact same as its BackgroundColor3 and anchorpoint musst BE 0,0 ALWAYS, give it a little BorderSizePixel to avoid scaling glitches.
Inside background we put UIListLayout for example becouse we should treat this Frame as ScrollingFrame for this trick to work.
Create Lower and Upper buttons OUTSIDE scrolling frame (They have very specific position and AnchorPoints!)
Everything else is handeled by script pretty much.

You can improve it of course by adding Horizontal sliders etc but i didn’t fell like it.

Kostiskat · May 22, 2025, 3:26pm

check the code bro, its the scrolling mechanism caused by clicking the buttons
its not that deep