web-dev-qa-db-ja.com

divにコンテンツを追加し、下部にスクロール/アニメーションします

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

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

$('#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/

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

常に機能させるにはどうすればよいですか？私はどういうわけかcorrectの高さを取得する必要があると考えていますが、どのように

jqueryscrolltop
27
mowgli

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

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

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

48
mowgli

私は再び遅れていますが、ここに私の2セントがあります。

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

あなたができる最善のことは、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'));

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

5
pachanka

コードを編集してテストしました：

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 で実際に試してみてください

3
Nikita Shekhov