Vertical Scrollbar Position Absolute

Question

Is there a way to have a cross browser vertical scrollbar with an absolute position?

My problem is that the scrollbar changes the width of my website when appears by giving some issues in my layout.

I do not want to remove it, I just want to make its width not disturbing my layout..

Thanks!

Answer 1

Only in Safari and Chrome (ie. Webkit), you can also use:

html{
    overflow-y: overlay;
}

It will add a scroll bar only when necessery, and put it above your content, which means it will not disturb your layout. Use with caution though, it's proprietary and undocumented.

Answer 2

Since nobody has mentioned it, if you want to use overlay when it's available (e.g., Chrome & Safari) and fallback to scroll when it's not, you can use the following.

html {
  overflow-y: scroll;
  overflow-y: overlay;
}

Answer 3

To stop your layout from moving when the scrollbar appears, you can use the css below to always make your scrollbar visible.

html{
    overflow-y: scroll;
}

Answer 4

always display it to not disturb your layout. it's what Google do ;)