1

ページでjQueryMasonryプラグインを使用しています。ボックスをクリックすると、ボックスの内容を示すポップアップダイアログが表示されるように設定しました。

ここでデモを作成しました。

ポップアップが表示される前に、すべてのボックスがそこに収まらないため、ページにスクロールバーがあります。ボックスの1つがクリックされると、ポップアップにコンテンツを追加して表示します。他のすべてのボックスを非表示にしましたが、ポップアップを反映するようにスクロールバーが更新されません。つまり、ポップアップのコンテンツは表示領域よりも小さくなりますが、スクロールバーはボックス用のままです。

私が何を意味するのか理解できたら、私を助けてくれませんか？

ありがとう。

4

1 に答える 1

2

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>
于 2011-02-25T14:18:32.727 に答える