Make scroll bar take no space / prevent layout shift

Question

I am making an application with html and am needing to have a scroll bar. But whenever I add one it shifts everything over to make the necessary room needed for the scroll bar. This screws up the layout of the application.

So I need a way to make the scroll bar simply overlay on top of the page, meaning the page is still there behind it. I already know how to style the scroll bar to make the back transparent, I just need the scroll bar to not take up any space.

Thanks In Advance!

Answer 1

Update - overlay was webkit-only and is now deprecated.

---

You can use the overflow overlay property instead of scroll:

html {
    overflow-y: overlay;
}

Answer 2

There's no way to make a scrollbar appear on top of your content without using shady hacks, and it's not the best idea anyways since it will affect the usability of your app. If the scroll bar is over the content, it's likely to hide links/text/etc.

Your page ideally should be styled in such a way that it adapts to different browser/page widths without breaking. Especially with just a little scroll bar.

Anyways, here's a workaround that may help:

html {
    overflow-y: scroll;
}

Adding this style will make sure the scroll bar track is always present, and will also help avoid "jumpy" pages when a scrollbar appears/disappears. Again, the real solution is to use a flexible layout.

As a side note, styling the scrollbar is generally not recommended. It doesn't work cross-browser and will usually be ignored completely.