18

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,151
  • 12
  • 47
  • 72
Dionysian
  • 1,155
  • 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

5 Answers5

24

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
  • 5,618
  • 5
  • 33
  • 54
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,552
  • 5
  • 47
  • 58
7

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,531
  • 5
  • 33
  • 46
6

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

    overflow-y: overlay;
Rahul Dudhane
  • 426
  • 5
  • 5
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