文档正文溢出到隐藏的问题答案

【问题标题】：Problem with document body's overflow to hidden文档正文溢出到隐藏的问题
【发布时间】：2011-11-10 04:57:13
【问题描述】：

从这个question 得到正确答案后，我遇到了另一个问题 - 将margin:0em auto; 添加到我的页面会导致页面“跳跃”

.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>

我该如何解决这个问题？

这里又是link。

【问题讨论】：

“到我的页面会导致页面'跳跃'”你是什么意思？
他的意思是当你点击链接获取覆盖框时，背景内容向右移动了大约5px。
感谢贾里德的纠正！
@lauthiamkok - 查看我的回答。

标签： jquery css dom append margin

【解决方案1】：

编辑

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

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

还有：

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

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

现在我注意到这显然就是你所需要的。

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

为了防止页面在滚动条消失时更正，您需要适当地填充BODY。这很可能是每个浏览器的不同值。以上我只在FF6、IE8/9和Chrome最新测试过。

【讨论】：

这会在页面上带来 2 个滚动条。
是的，直到现在我才注意到。
注意，自从@ShankarSangoli 指出滚动条问题后，我已经更新了我的帖子。
感谢贾里德！我刚刚在 IE8 上测试了它，它有同样的问题 - 请检查 IE8 上的页面...？其他浏览器（和 IE9）工作正常。
这是因为您需要将相同的逻辑应用于所有浏览器。查看我的编辑。

【解决方案2】：

尝试纯javascript...最好的'body'，而不是尝试使用'html'是错误。

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

【讨论】：

【解决方案3】：

发生这种情况是因为您在 clicing click here 链接上将 body 溢出 hidden 更改为 auto。需要改吗？

【讨论】：

是的，我需要将body的溢出更改为hidden，否则我会遇到这个问题-stackoverflow.com/questions/7299495/two-scrollbars-problems

【解决方案4】：

看起来，当视口水平缩小时，图像也会重新显示，但只有在视口宽度缩小到某个设定宽度后才会重新显示。这就是你得到闪光灯的原因。如何在图像周围添加更多边框，以便您了解宽度是多少？

另外：您不必将图像放在

s 中——在浏览器中的段落和图像处理之间可能会有一些交互。您可能想删除

s 看看会发生什么。

【讨论】：