Prevent scroll-bar from adding-up to the Width of

Question

I have a small issue trying to keep my .html pages at a consistent width on Chrome, For example I have a page (1) with lots of contents that overflows the viewport's (right word?) height, so there's a vertical scroll-bar on that page (1). On page (2) i have the same layout (menus, divs,...etc) but less content, so no vertical scroll-bars in there.

The problem is that on page (1) the scroll-bars seem to push elements slightly to the left (adding-up to the width?) while everything appears well centered on page (2)

I'm still a beginner on HTML/CSS/JS, and I'm fairly convinced that this isn't so difficult, but i had no luck figuring out the solution. It does work as intended on IE10, and FireFox (non-interfering scroll-bars), I only encountered this on Chrome.

Answer 1

I can't add comment for the first answer and it's been a long time... but that demo has a problem:

if(b.prop('scrollHeight')>b.height()){
    normalw = window.innerWidth;
    scrollw = normalw - b.width();
    $('#container').css({marginRight:'-'+scrollw+'px'});
}

b.prop('scrollHeight') always equals b.height(),

I think it should be like this:

if(b.prop('scrollHeight')>window.innerHeight) ...

At last I recommend a method:

html {
 overflow-y: scroll;
}

:root {
  overflow-y: auto;
  overflow-x: hidden;
}

:root body {
  position: absolute;
}

body {
 width: 100vw;
 overflow: hidden;
}

Answer 2

You can get the scrollbar size and then apply a margin to the container.

Something like this:

var checkScrollBars = function(){
    var b = $('body');
    var normalw = 0;
    var scrollw = 0;
    if(b.prop('scrollHeight')>b.height()){
        normalw = window.innerWidth;
        scrollw = normalw - b.width();
        $('#container').css({marginRight:'-'+scrollw+'px'});
    }
}

CSS for remove the h-scrollbar:

body{
    overflow-x:hidden;
}

Try to take a look at this: http://jsfiddle.net/NQAzt/

Answer 3

Webkit browsers like Safari and Chrome subtract the scroll bar width from the visible page width when calculating width: 100% or 100vw. More at DM Rutherford's Scrolling and Page Width.

Try using overflow-y: overlay instead.

Answer 4

I found I could add

::-webkit-scrollbar { 
display: none; 
}

directly to my css and it would make the scrollbar invisible, but still allow me to scroll (on Chrome at least). Good for when you don't want a distracting scrollbar on your page!

Answer 5

.modal-dialog {
   position: absolute;
   left: calc(50vw - 300px);
}

where 300 px is a half of my dialog window width.

This is actually the only thing that worked for me.

Answer 6

All you need to do is add:

html {
    overflow-y: scroll;
}

In your css file as this will have the scroller whether it is needed or not though you just won't be able to scroll

This means that the viewport will have the same width for both