滚动条不会在页面上更新

Question

我在我的页面上使用了jQuery Masonry插件。我已经对它进行了设置，这样当单击一个框时，就会显示一个带有框内容的弹出对话框。

我已经创建了一个演示here。

在弹出窗口显示之前，页面上有一个滚动条，因为所有的框都放不下。当单击其中一个框时，我将内容附加到弹出窗口中并显示它。我隐藏了所有其他框，但滚动条不会更新以反映弹出框，即弹出框中的内容少于查看区域，但滚动条仍保留为框。

如果你明白我的意思，你能帮帮我吗？

谢谢。

Answer 1

Masonry对包含的#grid元素应用了固定的高度，这就是为什么即使隐藏了所有内容，滚动高度也保持不变。如果将popup元素移到包含#grid元素的外部，并在单击时显示/隐藏网格，则滚动高度将正确更新。

Updated fiddle

重要的部分：

<div class="reader">
    <!-- content -->
</div>
<div id="grid">
    <!-- content -->
</div>

<script>
    $('.box').click(function() {
        $('.reader').show();
        $('#grid').hide();
    });

    $('.reader #close').click(function() {
        $('.reader').hide();
        $('#grid').show();
    });
</script>