29

新しいコンテンツを追加した後、divを一番下までスクロールさせようとしています（appendを使用）

主な部分は次のとおりです。

$('#textdiv').append('<p>Lorem ipsum dolor sit amet, solet nostrud concludaturque no eam. Ne quod recteque pri. Porro nulla zril mei eu. Eu nibh rebum pri, eu est maiorum menandri, ridens tamquam abhorreant te eum. Ipsum definiebas ad mel.</p>');

$('#textdiv').animate({scrollTop: $('#textdiv').height()}, 1000);

フィドルでそれを参照/試してください：http：//jsfiddle.net/5ucD3/7/

非常にバグがあります..一番下までスクロールしません（おそらく最初のいくつかの追加のみ）。下にスクロールして新しいコンテンツを追加すると、上にスクロールします。まったくアニメーション化されない場合もあります。

どうすれば常に機能させることができますか？どういうわけか正しい高さを取得する必要があると思いますが、方法がわかりません

4

3 に答える 3

50

私はうまくいく方法を見つけました：

$('#textdiv').animate({scrollTop: $('#textdiv').prop("scrollHeight")}, 500);

http://jsfiddle.net/5ucD3/13/

于 2012-05-27T23:28:13.727 に答える
5

私はまた遅れますが、これが私の2セントです。

1つの読み取り値のみを使用して動的要素を測定する場合、追加されるコンテンツが長い可能性があるため、またはコンテンツのリクエスト（$ .get、$。post、$。ajaxなど）がまだ空中にあるため、誤解を招く可能性があります。 。追加される文字列がリクエストからのものである場合は、コールバックメソッドを使用してレスポンスを追加する必要があります。

javascriptは関数を同期的に解決する必要があるため、実行できる最善の方法は、次のように文字列をつなぐことです。

$("#textdiv").append('The longest string ever parsed goes here.')
.animate({scrollTop: $('#textdiv').prop("scrollHeight")}, 500);

しかし、その通りです。特に、十分に高速に変化するdivを処理する場合、この方法はバグが多い傾向があります。

そのため、ジョブが確実に完了するようにしたい場合は、間隔を使用できます。

var scroll_to_bottom = function(element){
    var tries = 0, old_height = new_height = element.height();
    var intervalId = setInterval(function() {
        if( old_height != new_height ){    
            // Env loaded
            clearInterval(intervalId);
            element.animate({ scrollTop: new_height }, 'slow');
        }else if(tries >= 30){
            // Give up and scroll anyway
            clearInterval(intervalId);
            element.animate({ scrollTop: new_height }, 'slow');
        }else{
            new_height = content.height();
            tries++;
        }
    }, 100);
}

$('#textdiv').append('The longest string ever parsed goes here.');
scroll_to_bottom($('#textdiv'));

このメソッドは、コールバックや単純な関数のラインナップに勝るものはありませんが、追加がいつ終了するかが正確にわからない場合は、問題を解決します。

于 2014-08-02T09:46:26.957 に答える
3

私はあなたのコードを編集してテストしました：

var div = $('#textdiv'),
    height = div.height();

$('#add').on('click', function(){
    div.append('<p>Lorem ipsum dolor sit amet, solet nostrud concludaturque no eam. Ne quod recteque pri. Porro nulla zril mei eu. Eu nibh rebum pri, eu est maiorum menandri, ridens tamquam abhorreant te eum. Ipsum definiebas ad mel.</p>');
    div.animate({scrollTop: height}, 500);
    height += div.height();
});

jsFiddleでライブでお試しください </p>

于 2012-05-27T18:56:20.440 に答える