css - 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. However, it's marked on MDN as deprecated, so future support is uncertain.

Demo: jsfiddle.net/NKJRZ/385/