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?

What you could do is when the player clicks down on the custom scrolling frame, you can check if they are holding it and then after just move the scroll wheel to the players y position of the mouse. If you don't mess with the x position you won't have to worry about it shaking etc...