jquery - 要素を追加した後、position().top は変更されません

Question

だから私はこのようなdivにdivを持っています

<div id="container"> 
<div id="bottom"> </div>
</div>

コンテナは絶対配置されます。

.before() を使用して要素を追加しています

$("#bottom").before('<p>Some Paragraph</p>');

次に、コンテナの一番下までスクロールしようとしています

$("#container").scrollTop($('#bottom').position().top);

しばらくは機能しますが、その後機能しなくなります。

「$('#bottom').position().top」を出力すると、ある時点までインクリメントしてから停止することがわかります。

私がこのようにしている理由は、スクロールする前にアニメーションもあり、アニメーションで正常に動作するためですが、ある時点まで言ったようです。

私が思いついた唯一の一時的な解決策はこれでした（基本的には大きな数を入れます）。

 $("#container").scrollTop(10000000);

score 0 · Accepted Answer

offset()の代わりに使用position():

$("#container").scrollTop($('#bottom').offset().top);

score 0 · Accepted Answer

私の場合、ページに要素を追加した直後に、ブラウザーが要素の新しい高さのレンダリングを完了するまでに少し時間がかかることに気付きました。

解決策は次のとおりです。

setTimeout(function(){
    $("#container").scrollTop($('#bottom').position().top);
}, 50);

PS .: 50 は特に恣意的な数値です。私の場合は 0 だけで機能します。

score 0 · Accepted Answer

スクロール用のプラグインを使用するのはどうですか?

$(...).scrollTo( $('#container'), timeInMs );

3 に答える 3