13

垂直スクロールバー付きのdivがあります。Divはajaxを介して動的に更新され、htmlはjQueryの.htmlメソッドを使用して挿入されます。divが更新された後、スクロールバーが一番上に戻り、前の位置に維持しようとしています。

これが私が試している方法です：

var scrollPos = $('div#some_id').scrollTop(); //remember scroll pos
$.ajax({...
    success: function(data) {
        $('div#some_id').html(data.html_content); //insert html content
        $('div#some_id').scrollTop(scrollPos); //restore scroll pos
    }
});

これは失敗します。私の最善の推測は、挿入されたhtmlがレンダリングされていない（つまり、スクロールがない）ために失敗していることです。

たとえば、これは機能します。

setTimeout(function(){
    $('div#some_id').scrollTop(scrollPos);
}, 200);

しかし、これは私の意見では汚いハックです。一部のブラウザが挿入されたコンテンツをレンダリングするのにこれらの200ms以上かかることはないことを私は知る方法がありません。

続行する前に、ブラウザが挿入されたhtmlのレンダリングを終了するのを待つ方法はありますか？

4

4 に答える 4

9

これはまだハックであり、HTMLが実際に挿入されて準備ができている場合に使用できるコールバックは実際にはありませんが、の要素がhtml_content200ミリ秒ごとに挿入されているかどうかを確認して、実際に準備ができていることなどを確認できます。

ajax呼び出しからHTMLの最後の要素を確認します。

var timer = setInterval(function(){
   if ($("#lastElementFromAjaxID").length) {
       $('div#some_id').scrollTop(scrollPos);
       clearInterval(timer);
   }
}, 200);

より高度なオプションについては、おそらく間隔なしでこのようなことを行い、それをDOMnodeInsertedにバインドして、最後の要素が挿入されているかどうかを確認できます。

于 2012-05-20T13:13:43.517 に答える
4

ここで1つの違いを指摘したいと思います。1つは、.html（）の読み込みが完了したときですが、ブラウザが実際にコンテンツをレンダリングするのは別のことです。ロードされたコンテンツがテーブル、div、cssスタイリング、画像などのようにやや複雑な場合、レンダリングは、すべてのドメインがページに存在するよりもやや遅れて完了します。すべてがそこにあるかどうかを確認することは、レンダリングが完了したことを意味するわけではありません。setTimeout関数を使用しているので、私は自分でこれに対する答えを探していました。

于 2013-05-23T12:02:09.463 に答える
0

.html()常に同期して動作するため、このようなコールバックは存在しません

于 2013-04-03T13:21:37.880 に答える
0

画像の読み込みを待っている場合は、https：//github.com/desandro/imagesloadedという1つのアプローチがあります

于 2015-10-28T08:44:44.587 に答える