Search code examples
htmlcssgoogle-chromescrollbar

Prevent scrollbar from adding-up to the width of page on Chrome

I have a small issue trying to keep my html pages at a consistent width on Chrome.

For example, I have a page (1) with lots of contents that overflows the viewport's (right word?) height, so there's a vertical scrollbar on that page (1). On page (2), I have the same layout (menus, divs,...etc) but less content, so no vertical scrollbars in there.

The problem is that on page (1) the scrollbars seem to push elements slightly to the left (adding up to the width?) while everything appears well centered on page (2).

I'm still a beginner in HTML/CSS/JS, and I'm fairly convinced that this isn't so difficult, but I had no luck figuring out the solution. It does work as intended on IE10, and Firefox (non-interfering scroll bars), I only encountered this on Chrome.

Solution

  • The 2021 solution is to use scrollbar-gutter, which adds the space, a scrollbar would use, permanently to an element.

    Use

    .element-class {
   scrollbar-gutter: stable both-edges;
}

    both-edges is optional.

    See also https://caniuse.com/mdn-css_properties_scrollbar-gutter and https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter

    overflow: overlay is deprecated.

    Here is a codepen for clarification on the different possibilities: https://codepen.io/waxolunist/pen/ExweBMz