Overflow: Hidden But I Still Want To Have The Empty Scrollbar

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

Solution 1:

Since the previous solution does not work anymore (see original answer below), I've come 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:

functionscrollbarWidth() { 
    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 completeness 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:

functionscrollbarWidth() { 
    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); 
}

Solution 2:

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

Solution 3:

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;
}

Solution 4:

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.net/15km/bfpAD/1/