I’ve run into this problem several times when working with horizontal scrollbars, especially after replacing the default (Top, Middle, Bottom) images with custom ones. Everything looks fine in Studio on my main window, but when I switch to a different device, such as a mobile phone, the scrollbar scales vertically, making it appear offset from its original size. On the other hand, when testing on a larger resolution device like 1920×1080, it scales the opposite way, shrinking instead of keeping its intended proportions.
| The Normal Size for it is represented on this picture:
| When Changing Device to Mobile or minimum screen sizes:
| Last When Tweaking Device to Larger Resolution Based Devices as HD1920x1080:
Hope Y’all understood my issue, and i’m interested in a solution for it!
I’ve recently found a reliable way to fix scrollbar scaling issues across devices is to calculate the screen’s viewport size and divide it by the resolution you want your scrollbar to scale to. This keeps the scrollbar scale identical on all screen sizes.
The script is a LocalScript placed in StarterPlayerScripts:
| ------
task.wait(1)
local player = game.Players.LocalPlayer
local function ScaleBar(ScrollingFrame)
local basethickness = ScrollingFrame.ScrollBarThickness
local scaleFactor = workspace.CurrentCamera.ViewportSize.X / 1280
ScrollingFrame.ScrollBarThickness = basethickness * scaleFactor
end
local function autoscalestroke()
for _,gui in ipairs(player.PlayerGui:GetDescendants()) do
if gui:IsA("ScrollingFrame") then
ScaleBar(gui)
end
end
end
player.PlayerGui.DescendantAdded:Connect(function(d)
if d:IsA("ScrollingFrame") then
ScaleBar(d)
end
end)
