make scroll bar take no space

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.


Just use overlay property instead of scroll, like this:

html {
    overflow-y: overlay;
}

Note that this is a webkit only property.

Tags:

Html

Css

Layout