Добавлять контент в div и прокручивать/анимировать снизу

Я пытаюсь сделать прокрутку 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/

Очень багги.. Он не прокручивается до нижней части (возможно, только при первых добавлениях). Когда я прокручиваю вниз и добавляю новый контент, он прокручивается вверх. Иногда он не оживляет вообще.

Как мне заставить его работать всегда? Я полагаю, что мне нужно как-то получить правильную высоту, но не знаю, как

Ответ 1

Я нашел способ, который работает:

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

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

Ответ 2

Я опаздываю снова, но здесь мои два цента.

Иногда, когда измерение динамических элементов с использованием только одного чтения может быть ошибочным, поскольку добавляемый контент может быть длинным или потому, что запрос ($.get, $.post, $.ajax и т.д.) для контента по-прежнему в воздухе. Если добавляемая строка исходит из запроса, тогда вы должны использовать метод обратного вызова для добавления ответа.

Лучшее, что вы можете сделать, это соединить его так, потому что javascript "должен" разрешать синхронные функции:

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

Но вы правы, этот метод имеет тенденцию быть ошибкой, особенно при работе с divs, которые мутируют достаточно быстро.

Поэтому, если вы хотите быть уверенным, что работа будет выполнена, вы можете использовать интервал:

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'));

Этот метод не может выполнить обратный вызов или простую функциональную линию вверх, но он решает проблему, если вы точно не знаете, когда приложение будет завершено.

Ответ 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