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!

Danube

Answer 1

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;
}

Freewheeling

This should not be the accepted answer. It surely stops layout moving, but you break any css padding / margin symmetry. What if you want in the future to change all the margins of your app or the width of your scrollbar ? – Sillabub

Answer 2

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.

Kathrynekathy

awesome! I didn't know this existed – Tupi

overlay is now depracated developer.mozilla.org/en-US/docs/Web/CSS/overflow – Byrn

Great. This is the first time I know that the "overlay" property exists. This helped me a lot. – Fabiola

Answer 3

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;
}

Logarithm

Answer 4

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

Donation

Answer 5

You should use below style.

scrollbar-gutter: stable;
overflow: auto;

Bergerac

Answer 6

As @Jan said overflow: overlay; is depracated.

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

So, I think we can scrollbar-gutter. (Maybe we have to change margins or padding)

scrollbar-gutter: stable;
/* or /
scrollbar-gutter: stable both-edges;

Contraction

Answer 7

"The keyword value overlay is a legacy value alias for auto." states MDN.

However, when using overflow in conjunction with scrollbar-gutter, it creates the effect that the scrollbar floats, if the content has the width of the page:

body {
  overflow: auto;
  scrollbar-gutter: stable both-edges;
}

.content {
  width: 100vw; /* metrics like 100% should also work */
}

Pupil