Long Pages in Firefox Offset When Scrollbar Appears

Long pages in FireFox offset when scrollbar appears

You could simply always enable the scrollbar:

html{
 overflow: scroll;
}

but that would give you the horizontal scrollbar too, this is better:

html{
   overflow-y:scroll;
   overflow-x:auto;
}

That will give you only the vertical scroll and the horizontal when needed.

How to prevent scrollbar from repositioning web page?

overflow-y:scroll is correct, but you should use it with the html tag, not body or else you get a double scrollbar in IE 7

So the correct css would be:

html {
  overflow-y: scroll;
}

Stop browser from resizing website when scrollbar is visible

I don't believe you can cause the scrollbar to overlay the site, but you can force it to always be visible by setting (demo):

body{
   overflow-y:scroll;
}

This is on the assumption it is your body element that requires scrolling, alternatively simply set it on the element representing the scrollable viewport.

More on overflow-y from MDN

The overflow-y CSS property specifies whether to clip content, render
a scroll bar, or display overflow content of a block-level element,
when it overflows at the top and bottom edges.

scroll
The content is clipped and desktop browsers use scrollbars,
whether or not any content is clipped. This avoids any problem with
scrollbars appearing and disappearing in a dynamic environment.
Printers may print overflowing content.

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.

jQuery .append() in Firefox: vertical scrollbar appears?

If you give the added <div> elements "position: absolute", then you'll get no scrollbars.

The jQuery UI ".position()" utility will give the affected elements (your added <div> elements) "position: relative" if they're not otherwise set up with a "position". Elements that are positioned that way consume layout space on the page as if they were not moved away from their "natural" position. Thus, the page overflows when you add all those elements even though they're relocated such that they all fit.

By giving them "position: absolute", you take them out of the ordinary layout flow. Chrome doesn't agree about this, for reasons I don't understand; I think Firefox is actually doing the correct thing here. (edit — if you add a line to append one last <div> to "target", and make it just a plain-jane <div> with a little text in it but no positioning at all, then you'll see that it ends up way way down the page in Chrome, and you will get a scrollbar about the same size as Firefox gives you. Thus, it looks like Chrome doesn't "claim" the phantom space unless something actually comes after it.)

Here is a jsfiddle. The updated code (one extra line):

    $(document).ready(function() {
        var cols = new Array('#660', '#606', '#066', '#993', '#939', '#399', '#cc9', '#c9c', '#9cc', '#ffc', '#fcf', '#cff');

        for(i = 0; i < 10; i++){
            $('#target').append('<div id="new_' + i + '">Hello</div>');
            $('#new_' + i)
            .position({
                my: 'left top',
                at: 'left top',
                of: '#target',
                offset: '' + (i * 20) + ' ' + (i * 10)
            })
            .css('position', 'absolute')
            .width(200)
            .height(150)
            .css('background-color', cols[i]);
        }
    });

Firefox page moves when hiding/showing divs

What I ended up doing was this: HTML { OVERFLOW-Y:SCROLL; OVERFLOW-X:HIDDEN; }

Here's a good related SO post.

Pure css way to prevent scrollbar pushing content to the left?

Unfortunately there is no other way to prevent your problem.
Just use

     body {
        overflow:hidden;
     }

As an alternative, I recommend you to use a Framework for custom scroll bars. Or disable the scrollbar as shown in the above snippet and emulate it with an absolute positioned and some JS.
Of course you will have to consider calculating the height of the page and the offset of the scrollbar thumb.

I hope that helps.

Body height 100% displaying vertical scrollbar

If you paint the backgrounds of html and body (giving each its own color), you'll quickly notice that body is being shifted down along with #container, and #container itself isn't offset from the top of body at all. This is a side effect of margin collapse, which I cover in detail here (although that answer describes a slightly different setup).

It's this behavior that's causing the scrollbar to appear, since you've declared body to have 100% the height of html. Note that the actual height of body is unaffected, as margins are never included in height calculations.

---

Related Topics