javascript - 滚动条不会在页面上更新

Question

我在我的页面上使用 jQuery Masonry 插件。我已经进行了设置，以便在单击一个框时，会显示一个弹出对话框，其中包含该框的内容。

我在这里创建了一个演示。

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

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

谢谢。

Answer 1

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

更新的小提琴

重要的位：

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