I set 'overflow:hidden' on my html body with Javascript when I press a button. But when I do that the whole body moves 5 pixels or so to the left because the space of the scrollbar is gone. How do i prevent that.

I can't set margin of the body to a specific size because the width of scrollbars differentiate between browsers

I set 'overflow:hidden' on my html body with Javascript when I press a button. But when I do that the whole body moves 5 pixels or so to the left because the space of the scrollbar is gone. How do i prevent that.

I can't set margin of the body to a specific size because the width of scrollbars differentiate between browsers

• javascript
• html
• css

• For the li elements, try a css rule : white-space: nowrap; – Anthony Commented May 30, 2013 at 21:13
• Did you ever find a solution for this issue? If so it would be helpful if you marked which answer was correct or if none of them helped you perhaps you could post an answer yourself? Thanks! :) – Bill Commented Mar 19, 2016 at 19:58

4 Answers 4

Since the previous solution does not work anymore (see original answer below), I've e across another solution which works for me and, according to MDN, it should work in all browser, with IE starting from version 6. This solution to get the scrollbar width is even a bit simplified:

1. Append a div without a scrollbar to the body and position it off screen
2. Measure the client width of the div
3. Set the div to have a scrollbar (using css overflow style)
4. Measure the clientWidth of the div again
5. Remove the div
6. Return the difference of the two widths

And the code would look like this:

function scrollbarWidth() { 
    var div = $('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"></div>'); 
    // Append our div, do our calculation and then remove it 
    $('body').append(div); 
    var w1 = div.prop('clientWidth'); 
    div.css('overflow-y', 'scroll'); 
    var w2 = div.prop('clientWidth'); 
    $(div).remove();
    return (w1 - w2); 
}

And here is a working jsFiddle.

Original answer (for pleteness sake)

Here is a solution to calculate the width of a scrollbar, which you can use in conjuction with some of the other answers here (and your own knowledge as far as I can tell).

The idea is to do the following steps:

1. Append two divs to the body and position them off screen
2. Measure the width of the inner div
3. Set the outer div to overflow
4. Measure the width of the inner div (again)
5. Remove the divs
6. Return the difference of the two widths

And here is the code, copied from the referenced page:

function scrollbarWidth() { 
    var div = $('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div>'); 
    // Append our div, do our calculation and then remove it 
    $('body').append(div); 
    var w1 = $('div', div).innerWidth(); 
    div.css('overflow-y', 'scroll'); 
    var w2 = $('div', div).innerWidth(); 
    $(div).remove(); 
    return (w1 - w2); 
}

You could try this old trick:

html {
  overflow-y: scroll; 
}

What this does is force the scrollbar to always be visible.

Compare:

normal JSFiddle

JSFiddle with the vertical scrollbar always there

Here is code to add a disabled vertical scroll bar. If placed more prominent in CSS than the rest of the CSS, it should override whatever you've done to other portions.

html {
overflow-y: scroll;
}

You could always put a wrapper around the content that you are hiding and then place the overflow: scroll on div and overflow: hidden on the content div.

#wrapper { overflow-y: scroll; }
#content { overflow: hidden; }

See the attached fiddle for a working version

http://jsfiddle/15km/bfpAD/1/