How to create a Custom Scrolling bar without using the Draggable Property?

So i tried to make a custom scrollbar, without using a ScrollingFrame, i tried to make one with the Draggable property enabled and lock the X axis. The problem is, every time i drag the Scroll bar, it didn't properly lock the X axis, it just shakes every time i move (yes i did use the While Wait() loop)

here's my code;

local ts = game:GetService("TweenService")

local bar = script.Parent.ScrollBar
local scroll = script.Parent

local ti = TweenInfo.new(0.2,Enum.EasingStyle.Quart,Enum.EasingDirection.Out)

bar.Draggable = true 
bar.Active = true
bar.Selectable = true

scroll.MouseEnter:Connect(function() -- Simply Tweens the bar's thickness when the mouse enters scroll
    local t = ts:Create(bar,ti,{Size = UDim2.new(0,10,0,100)})
        t:Play()
end)

scroll.MouseLeave:Connect(function() -- This too.
    local t = ts:Create(bar,ti,{Size = UDim2.new(0,3,0,100)})
        t:Play()
end)

while wait() do -- Locks the X Axis
    bar.Position = UDim2.new(0.5,0,0,bar.Position.Y.Offset)
end

here's the result, The gray bar determines the scroll variable, where the tweens will be played when the mouse enters it, and the white bar determines the bar variable, which is the scrolling bar

Is there a way to make this better?