Make scrollbar not take up space

Question

I am making an application with html and I need to have a scroll bar. But whenever I add it, it shifts everything to make the desired room necessary for the scrollbar. This screws up the layout of the application. Therefore, I need the scrollbar to simply overlay on top of the page, which means the page is still behind it. I already know how to stylize a scroll bar to make it transparent, I just need a scroll bar so as not to take up space.

Thanks in advance!

Answer 1

There is no way to make the scroll bar on top of your content without using shadow hacks, and this is not a good idea, as this will affect the usability of your application. If the scroll bar is above the content, it can hide links / text, etc.

Your page should ideally be designed in such a way that it adapts to different browser / page widths without breaking. Especially with a small scrollbar.

In any case, a workaround that might help:

html {
    overflow-y: scroll;
}

Adding this style ensures that the scroll bar track is always present, and also helps to avoid “leading” pages when the scroll bar appears / disappears. Again, the real solution is to use a flexible layout.

, . - .