jquery - style - Añade contenido a div y desplaza/anima a la parte inferior

jquery name attribute

Question

Estoy tratando de hacer que un div se desplace hacia la parte inferior después de agregar contenido nuevo (usando el apéndice)

Aquí está la parte principal:

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

Ver / intentarlo en el violín: http://jsfiddle.net/5ucD3/7/

Muy buggy ... No se desplaza hacia abajo (solo tal vez en los primeros apéndices). Cuando me desplazo hacia abajo y agrego contenido nuevo, se desplaza hacia arriba. A veces no se anima en absoluto.

¿Cómo consigo que funcione siempre? Me imagino que de alguna manera tengo que obtener la altura correcta , pero no sé cómo

Answer 1

Encontré una manera que funciona:

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

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

Answer 2

He editado y probado tu código:

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();
});

Pruébalo en vivo en jsFiddle

Answer 3

Llego tarde otra vez, pero aquí están mis dos centavos.

A veces, al medir elementos dinámicos utilizando solo una lectura puede ser un error porque el contenido que se agrega puede ser largo, o porque la solicitud ($ .get, $ .post, $ .ajax, etc ...) para el contenido todavía está en el aire . Si la cadena que se está agregando proviene de una solicitud, entonces debe usar un método de devolución de llamada para adjuntar la respuesta.

Lo mejor que puedes hacer es encadenarlo así, porque javascript "debería" resolver las funciones de manera síncrona:

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

Pero tienes razón, este método tiende a tener errores, especialmente cuando se trata de divs que mutan lo suficientemente rápido.

Es por eso que si desea estar más seguro de que el trabajo se realiza, puede usar un intervalo:

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

Este método no puede vencer una devolución de llamada o una simple función en línea, pero resuelve el problema si no sabe exactamente cuándo finalizará el apéndice.