Is it possible to make scrollbar position:absolute? - html

Question

If you have every created a dynamic page, you may notice that if you start out with a page height that does not require a scrollbar and then add content dynamically, the scroll bar will appear. When it does this, it "pushes" all of my content to the left the width of the scroll bar and it appears that everything on the page jumps a little.
Is it possible to make the scrollbar act as if it were position absolute so that instead of pushing my content all to the left, it just lays over the content. I do not like the way the content all "jumps" to the left; it looks nasty.
Thanks

Answer 1

you can use overflow: overlay to avoid your content being pushed, what is does is instead of taking your container space it position the scrollbar to top of you content
.overlay {
width: 100px;
height: 100px;
overflow: overlay;
}
.auto {
width: 100px;
height: 100px;
overflow: auto;
}
<h2>scrollbar on content</h2>
<div class="overlay">
<div class="scrollbox-content">Hover me! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere velit, repellat voluptas ipsa impedit fugiat voluptatibus. Facilis deleniti, nihil voluptate perspiciatis iure adipisci magni, nisi suscipit aliquam, quam, et excepturi! Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Facere velit, repellat voluptas ipsa impedit fugiat voluptatibus. Facilis deleniti, nihil voluptate perspiciatis iure adipisci magni, nisi suscipit aliquam, quam, et excepturi!</div>
</div>
<h2>scrolbar sharing space with content</h2>
<div class="auto">
<div >Hover me! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere velit, repellat voluptas ipsa impedit fugiat voluptatibus. Facilis deleniti, nihil voluptate perspiciatis iure adipisci magni, nisi suscipit aliquam, quam, et excepturi! Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Facere velit, repellat voluptas ipsa impedit fugiat voluptatibus. Facilis deleniti, nihil voluptate perspiciatis iure adipisci magni, nisi suscipit aliquam, quam, et excepturi!</div>
</div>
the div with overlay css placed on top of the overflown div however the div with auto overflow pushes the data.
Using this for container with text is not an ideal solution, but I chooses text so the difference would be clear

Answer 2

You could, but it wouldn't be perfect. Copying the code from this post:
// Used like $('#my-id').hasScrollbar();
jQuery.fn.hasScrollbar = function() {
var scrollHeight = this.get(0).scrollHeight;
//safari's scrollHeight includes padding
if ($.browser.safari)
scrollHeight -= parseInt(this.css('padding-top')) + parseInt(this.css('padding-bottom'));
if (this.height() < scrollHeight)
return true;
else
return false;
}
You could query to see if the scroll bar is present. Before this, however, you'll have a global variable that is the width of the viewport prior to the scrollbar appearing:
var viewportWidth = $(window).width();
And after running the function above, you could compare this viewportWidth with the new viewport width of the window with the scroll bar, and margin-right the body the negative amount of the difference.

Answer 3

What you ask cannot be done.
You could however, force it to appear at all times:
#id {
overflow: scroll;
}
But this is horribly ugly.