Prevent scrollbar from adding-up to the width of page on Chrome
css, google-chrome, html, scrollbar
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
Problem
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.