How to Compensate for Vertical Scrollbar When It Is Not Yet Present

How to compensate for Vertical Scrollbar when it is not yet present

When the contents of the page no longer fit vertically, the browser adds a scrollbar to the right side of the window. This changes the available width in the browser window, so any content that is either centered or positioned relative to the right side of the window will move left a bit. This is very common.

There are a number of ways to control this, but the most common is to either make it so you always have a scrollbar or never have a scrollbar by controlling the overflow-y property on the window.

Setting overflow-y: scroll will force the scrollbars to always be there.

Setting overflow-y: hidden will force there to never be scrollbars.

How do I force a vertical scrollbar to appear?

Give your body tag an overflow: scroll;

body {
    overflow: scroll;
}

or if you only want a vertical scrollbar use overflow-y

body {
    overflow-y: scroll;
}

Expand html document underneath the scrollbar

There is no reliable cross-browser way to do what you're looking for.

Different browsers handle the scrollbar differently -- some (including Safari and some versions of Chrome) already do exactly what you want, most others enforce a particular background-color and width for the scrollbar (not always the same width) and push the content over to make room. Any negative-margin or width-greater-than-100% trickery will either not work at all or will put some of your content underneath a non-transparent scrollbar in many browsers (and offscreen in others).

If the 'jump' when the scrollbar appears is too distracting, you can force the scrollbar to always be present with overflow-y:scroll.

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

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/

Prevent a centered layout from shifting its position when scrollbar appears

I'm afraid the best way to solve this is to force the scroll bar to be visible at all times with html {overflow-y: scroll;}. The problem you have is that the "available area" shrinks with say 10 px when the scroll bar appear. This cause the calculated margin on your left side to shrink with half the width of the scroll bar, thus shifting the centered content somewhat to the left.

A possible solution might be to calculate the margin with JavaScript instead of using margin: 0 auto; and somehow compensate for the "lost" pixels when the scroll bar appear, but I'm afraid it will be messy and the content will probably move a little bit anyway while you calculate and apply the new margin.

Hide vertical scrollbar, keep horizontal and still able to scroll

You can use -webkit-scrollbar, but you need to use width and height instead of display: none

div {

  width: 100px;

  height: 100px;

  font-size: 48px;

  

  overflow: auto;

}

::-webkit-scrollbar {

  height: 0px;

  width: 8px;

  border: 1px solid #fff;

}

::-webkit-scrollbar-track {

  border-radius: 0;

  background: #eeeeee;

}

::-webkit-scrollbar-thumb {

  border-radius: 0;

  background: #b0b0b0;

}

<div>

Lorem ipsum dolor sit amet.

</div>

Shift scroll to move horizontally

---

Related Topics