20

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.

madth3
  • 7,275
  • 12
  • 50
  • 74
Dionysian
  • 1,195
  • 2
  • 13
  • 24
  • body content being pushed ?? Not clear. Be more specific. I don't think there is such a thing called being pushed away. Might be because of your markup or styles. Put up something to debug. Fiddle please – Arun Aravind Oct 06 '13 at 12:35
  • 2
    The page originally doesn't have the scrollbar. Then ajax appends more content and the scrollbar appears. To account for the width of the scrollbar the original body is "pushed". I see this happens in chrome and Firefox. I'll put a fiddle later if there is no other answer. – Dionysian Oct 06 '13 at 12:57
  • I mean the scroll bar is of size say 10px. That won't affect you drastically. Negligible shift ryt. You cannot handle this issue without specifying overflow: scroll. Else you have to go for a custom scrollbar with z-index. – Arun Aravind Oct 06 '13 at 13:02
  • Possible duplicate of [How Do I Stop My Web Content From Shifting Left When The Vertical Scrollbar Appears? Roll-Up of Advice 2017](https://stackoverflow.com/questions/45524214/how-do-i-stop-my-web-content-from-shifting-left-when-the-vertical-scrollbar-appe) – JBH Aug 05 '17 at 17:17

6 Answers6

25

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.

binaryfunt
  • 6,401
  • 5
  • 37
  • 59
14

You can create a container that have a fixed width, and give the content the same width (same static width - not 100%). that way, when the content overflows the parent, the scroll will not push the content but will flow above it.

using that, you can apply a cool way to scroll without pushing anything. by showing the scroll only when you hover the container.

Check out this simple Demo

EDIT: Here I show the difference between setting static width, and %.

avrahamcool
  • 13,888
  • 5
  • 47
  • 58
8

Well, the scrollbar will always push your content aside, there is really nothing you can do about that. What you can do is to always show to scrollbar for example:

html,body {
    height:101%;
}

or 

html {
    overflow-y: scroll;
}
koningdavid
  • 7,903
  • 7
  • 35
  • 46
7

The best way to do this is assign value 'overlay' to overflow property. This works fine.

    overflow-y: overlay;
Rahul Dudhane
  • 484
  • 6
  • 6
2

In 2023 there is a scrollbar-gutter property. scrollbar-gutter: stable; does the trick. Supported by every browser apart from Opera.

Aleks
  • 894
  • 10
  • 14
0

In my case, I was getting an annoying pop event on my navbar whenever the scrollbar appears, but applying position fixed on my nav solved it for me.

Osama Ahmaro
  • 143
  • 2
  • 9