Problem with document body's overflow to hidden

Question

After getting the right answer from this question, I am having another problem - adding margin:0em auto; to my page will cause the page 'jumpy'

.align-center-public {
    width:1000px;
    margin:0em auto;
    overflow:hidden;
}

<div id="container">

    <div class="align-center-public">

        <p style="width:800px; text-align:center; border:1px solid #000;"><a href="#">Please scroll down until you see the click button</a></p>
        <p><img src="winnie-the-pooh-2011-9.jpg" alt="test"/></p>
        <p><img src="winnie-the-pooh-2011-9.jpg" alt="test"/></p>
        <p><img src="winnie-the-pooh-2011-9.jpg" alt="test"/></p>
        <div><a href="#" class="get-photo">click here</a></div>
        <p><img src="winnie-the-pooh-2011-9.jpg" alt="test"/></p>

    </div>

</div>

How can I fix this?

Here is the link again.

"to my page will cause the page 'jumpy'" what do you mean with that? — Stefan, Sep 04 '11 at 18:33
He means when you click the link to get the overlay box, the background content shifts to the right about 5px. — Jared Farrish, Sep 04 '11 at 18:38

Jared Farrish · Accepted Answer · 2011-09-04T19:29:17.397

2

EDIT

if ($.browser.msie && parseInt($.browser.version) < 9) 
    $('html').css('overflow', 'hidden');

$('body').css('overflow', 'hidden').css('padding-right','17px');

And:

if ($.browser.msie && parseInt($.browser.version) < 9) 
    $('html').css('overflow', 'auto');

$('body').css('overflow', 'auto').css('padding-right', 0);

And now I'm noticing that this apparently is all you need.

http://jfcoder.com/test/pooh.html

To keep the page from correcting when the scrollbars disappear, you need to pad the BODY appropriately. This is more than likely a different value for each browser. The above I have tested in FF6, IE8/9 and Chrome latest only.

edited Sep 04 '11 at 19:29

answered Sep 04 '11 at 18:40

Jared Farrish

48,585
17
95
104

This brings 2 scrollbars on the page. – ShankarSangoli Sep 04 '11 at 18:41
Yeah, I didn't notice until just now. – Jared Farrish Sep 04 '11 at 18:42
Note, I've updated my post since @ShankarSangoli pointed out the scrollbar problem. – Jared Farrish Sep 04 '11 at 19:09
thanks Jared! I just tested it on IE8 and it has the same problem - can check the page on IE8 please...? other browsers (and IE9) work fine. – Run Sep 04 '11 at 19:21
That's because you'll need to apply the same logic to all browsers. See my edit. – Jared Farrish Sep 04 '11 at 19:24

score 1 · Answer 2 · answered Feb 11 '15 at 17:30

1

Try a javascript pure... best 'body', not try use 'html' is bug.

<script>
document.body.style.overflow = 'hidden';
</script>

answered Feb 11 '15 at 17:30

KingRider

2,140
25
23

score 0 · Answer 3 · answered Sep 04 '11 at 18:41

0

It is happening because you are changing the body overflow hidden to auto on clicing click here link. Is it required to be changed?

answered Sep 04 '11 at 18:41

ShankarSangoli

69,612
13
93
124

yes I need to change `body`'s overflow to `hidden` otherwise I will have this problem - http://stackoverflow.com/questions/7299495/two-scrollbars-problems – Run Sep 04 '11 at 18:58

score 0 · Answer 4 · answered Sep 04 '11 at 18:41

It seems, too, that the images are being redisplayed when the viewport shrinks horizontally, but only after the viewport width narrows to within some set width. That's why you are getting the flash. How about putting some more borders around the images so you can get an idea what that width is?

Also: you don't have to put the images in <p>s -- there might be some interaction between paragraph and image processing in the browser. You might want to remove the <p>s and see what happens.

Problem with document body's overflow to hidden

4 Answers4