Is it possible to make scrollbar position:absolute?

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

you could use a `window.resize` event handler to detect when a scrollbar is needed by comparing the heights of `document` and `window`, adding or removing some right margin from the body as needed, but this is a javascript solution, and a bit messy in practice — jackwanders, Jul 31 '12 at 20:28

Sohail Faruqui · Answer 1 · 2020-11-02T12:48:46.000

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

could you edit your answer and outline where this CSS rule is applied? — Martin, Nov 02 '20 at 12:22
overlay is being deprecated: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow — Jan Pi, May 13 '22 at 08:40

score 1 · Accepted Answer · edited May 23 '17 at 12:21

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.

i actually thought about doing that initially but wanted a CSS solution if possible. Looks like there is not one available so I will probably use ur method. Thanks — Matt Hintzke, Jul 31 '12 at 20:19

score 0 · Answer 3 · answered Jul 31 '12 at 20:13

0

What you ask cannot be done.

You could however, force it to appear at all times:

#id {
    overflow: scroll;
}

But this is horribly ugly.

answered Jul 31 '12 at 20:13

Michael Robinson

29,278
12
104
130

Is it possible to make scrollbar position:absolute?

3 Answers3