Prevent scroll-bar from adding-up to the Width of page on Chrome

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

User · Accepted Answer

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/

User · Answer

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

User · Answer

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

User · Answer

It doesn t seem my other answer is working quite right at the moment  but I ll continue to try to get it operational    But basically what you ll need to do  and what it was trying to do dynamically  is set the contents  width to slightly less than that of the parent  scrollable pane  So that when the scrollbar appears it has no affect on the content   This EXAMPLE shows a more hacky way of attaining that goal  by hardcoding widths instead of trying to get the browser to do it for us via padding  If this is feasible this is the most simplest solution if you don t want a permanent scrollbar

User · Answer

I solved a similar problem I had with scrollbar this way  First disable vertical scrollbar by setting it s  overflow-y  hidden   Then make a div with fixed position with a height equal to the screen height and make it s width thin to look like scrollbar  This div should be vertically scroll-able  Now inside this div make another div with the height of your document  with all it s contents   Now all you need to do is to add an onScroll function to the container div and scroll body as the div scrolls  Here s the code  HTML   lt div onscroll  quot OnScroll this   quot  style  quot width 18px  height 100    overflow-y  auto  position  fixed  top  0  right  0  quot  gt       lt div id  quot ScrollDiv quot  style  quot width 28px  height 100   overflow-y  auto  quot  gt       lt  div gt   lt  div gt   Then in your page load event add this  JS     document   ready function         var body   document body      var html   document documentElement      var height   Math max  body scrollHeight  body offsetHeight  html clientHeight  html scrollHeight  html offsetHeight       document getElementById  ScrollDiv   style height   height    px         function OnScroll Div        document body scrollTop   Div scrollTop     Now scrolling the div works just like scrolling the body while body has no scrollbar

User · Answer

I had the same issue on Chrome  It only happened for me when the scroll bar is always visible   found in the general settings  I have a modal and when I open the modal I noticed that     body       padding-left  15px      is added to the body  To stop this from happening I added   body       padding-left  0px  important

User · Answer

For containers with a fixed width a pure CSS cross browser solution can be accomplished by wrapping the container into another div and applying the same width to both divs    outer     overflow-y  auto    overflow-x  hidden            width must be an absolute value otherwise the inner divs width must be set via      javascript to the computed width of the parent container         width  200px      inner     width  inherit      Click here to see an example on Codepen

User · Answer

DISCLAIMER  overlay has been deprecated  You can still use this if you absolutely have to  but try not to   This only works on WebKit browsers  but I like it a lot  Will behave like auto on other browsers    yourContent     overflow-y  overlay      This will make the scrollbar appear only as an overlay  thus not affecting the width of your element

User · Answer

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

User · Answer

body       width  calc  100         max-width  calc  100vw - 1em       works with default scroll bars as well  could add  overflow-x  hidden   to ensure horizontal scroll bars remain hidden for the parent frame  unless this is desired from your clients

User · Answer

EDIT  this answer isn t quite right at the moment  refer to my other answer to see what I was attempting to do here  I m trying to fix it up  but if you can offer assistance do so in the comments  thanks   Using padding-right will mitigate the sudden appearance of a scrollbar  EXAMPLE    As you can see from the dots  the text makes it to the same point in the page before wrapping  regardless of whether or not a scrollbar is present  This is because when a scrollbar is introduced the padding hides behind it  so the scrollbar doesn t push on the text

User · Answer

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   gt 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   gt 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

User · Answer

Probably  html       width  100vw      is just what you want

User · Answer

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

[html] Prevent scroll-bar from adding-up to the Width of page on Chrome

Examples related to html

Examples related to css

Examples related to google-chrome

Examples related to scrollbar