1

100 項目の検索結果リストがあります。表示されると、ブラウザのスクロール バーが表示されます。今のところ問題ありません。

ただし、ユーザーが再度検索すると、今度は 8 件の結果しか得られず、結果がページに収まり、スクロール バーが表示されなくなります。繰り返しますが、問題ありません。

しかし、私が今やりたいことは、これを派手に見せることです. そのため、結果をフェードアウトしてから、新しい結果をフェードインしたいと考えています。

問題は、フェードアウトするとウィンドウ全体のサイズが変更され、スクロールバーが移動して新しい結果が表示されることです。新しい結果にスクロール バーが必要な場合、最初に消えてから再び表示されるので、これはちょっと奇妙に見えます。

結果の次のロードが完全に表示されるまで、ウィンドウのサイズ変更を延期し、スクロールバーを表示したままにする純粋なjQueryの方法はありますか?

私が探している効果は、両方の結果にスクロール バーが必要な場合、最初の結果をフェードアウトし、スクロール バーはそのままで、次の結果をフェード インし、スクロール バーはそのままになることです。消えてから再び現れるのではなく。

4

2 に答える 2

1

デモ—精巧な概念実証のためにこれはどうですか？

基本的な考え方は、交換品が届くまで既存の垂直スクロールバーを維持することです。

// Specify the height of the container, for example, height:120px;
$('.container').height($('.container').height());
// Hide currently visible content.
// Load in new content.
// Reset the height of the container i.e. height:auto;
$('.container').height('');
于 2012-11-12T04:49:45.880 に答える
1

垂直スクロールバーは、ウィンドウの高さと比較したドキュメント内のコンテンツの高さに基づいて表示されます。そのため、スクロールバーは、ウィンドウよりも高いコンテンツをドキュメントに追加すると表示され、コンテンツがウィンドウよりも高さがなくなると消えます。

トランジション中にスクロールバーを制御し、コンテンツの高さとは無関係にしたい場合は、何をしようとしているかに応じて、CSS を使用してスクロールバーを手動でオンまたはオフにする必要があります。overflow-yこれは、オブジェクトにスタイル プロパティを設定することで実行できbodyます。例えば：

$(document.body).css("overflow-y", "scroll");

スクロールバーを強制的にオンにします。overflow-y ここのオプションを見ることができます。

于 2012-11-12T03:46:08.840 に答える