Expand html document underneath the scrollbar

Question

Whenever I have content that expands the page height, a scrollbar appears on my rendered website. However, the scrollbar pushes my content to the left by the width of the scroll bar so when I navigate to a page where the height is less then the page height, there's a noticeable jump as the page width resizes. Is it possible to have the scrollbar sit on top of all my html content? Similar to how scrolling works in Chrome on iOS.

Ideally a css property like overflow:absolute where the scrollbar appears and the content isn't clipped would be the best but I know that doesn't exist.

EDIT: In the image below, you can see that the scrollbar has a white background and has pushed my html content to the left. What I want is the html content to be underneath the scrollbar, as if the scrollbar had absolute positioning to the right.

I conferred with one of my colleagues who's running the same version of chrome as I am and his scrollbar does exactly what I want. Maybe AB testing on Google's part?

Answer 1

As it would turn out, all I had to do was update my version of OSX...baffling. I'll accept @DanielBeck's answer because it's a reasonable answer to a coding question whereas here, the solution was to arbitrary update my laptop software.

Answer 2

There is no reliable cross-browser way to do what you're looking for.

Different browsers handle the scrollbar differently -- some (including Safari and some versions of Chrome) already do exactly what you want, most others enforce a particular background-color and width for the scrollbar (not always the same width) and push the content over to make room. Any negative-margin or width-greater-than-100% trickery will either not work at all or will put some of your content underneath a non-transparent scrollbar in many browsers (and offscreen in others).

If the 'jump' when the scrollbar appears is too distracting, you can force the scrollbar to always be present with overflow-y:scroll.

Answer 3

Native scrollbar styling is limited, but here is a demo of how to do it:

body::-webkit-scrollbar-thumb { background-color: darkgrey; outline: 1px solid slategrey; }

http://codepen.io/zakkain/pen/phjBC

Chrome and IE respond to it very well. Firefox not so much, the issue is logged here https://bugzilla.mozilla.org/show_bug.cgi?id=77790 and is stale.

If you want firefox, you'll have to go with a custom scrollbar replacer.

And how to compensate for scrollbar is explained here: How to compensate for Vertical Scrollbar when it is not yet present

It works well, but most code pens can't show it, so you'll have to experiment on your own.

This is the OSX disappearing scrollbar issue (not sure if it's relevant for modern versions of OSX): CSS - Overflow: Scroll; - Always show vertical scroll bar?