Полоса прокрутки не обновляется на странице

Question

Я использую плагин jQuery Masonry на своей странице. Я настроил его таким образом, чтобы при щелчке окна отображалось всплывающее диалоговое окно с содержимым поля.

Я создал демо здесь .

до показа всплывающего окна, на странице есть полоса прокрутки, потому что все поля там не помещаются. Когда щелкает одно из полей, я добавляю содержимое во всплывающее окно и показываю его. Я скрываю все остальные поля, но полоса прокрутки не обновляется, чтобы отобразить всплывающее окно, т. Е. Содержимое во всплывающем окне меньше области просмотра, но полоса прокрутки по-прежнему остается для ящиков.

Если вы поняли, что я имел в виду, не могли бы вы мне помочь?

Спасибо.

Answer 1

Кладка применяет фиксированную высоту к содержащемуся элементу #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>