Preventing relayout due to scrollbar

Question

How can I prevent the body of the page being "pushed" to the left when a scrollbar appears due to ajax content? I can of course set overflow:scroll to the body, but it wouldn't look nice.

I am using bootstrap, but I guess it is a general question.

Answer 1

overflow: overlay

Building on avrahamcool's answer, you can use the property overflow: overlay.

Behaves the same as auto, but with the scrollbars drawn on top of content instead of taking up space. Only supported in WebKit-based (e.g., Safari) and Blink-based (e.g., Chrome or Opera) browsers.

Source: MDN

This is great for when you need horizontally-scrolling content and don't want it to change size when scrollbars appear on hover.

Caveat: it is deprecated. Support is pretty much limited to Chromium, but that might go away in the future. See https://caniuse.com/css-overflow-overlay.

However, you can do a fallback of auto:

.container:hover {
    overflow: auto; /* fallback */
    overflow: overlay;
}

Demo: jsfiddle.net/NKJRZ/385/

---

Can I Use also has an interesting note:

This value is deprecated and related functionality being standardized as the scrollbar-gutter property.

However, you should check their link because browser support for this experimental feature is no better than overflow: overlay as of November 2021.