Anexar contenido de DIV y desplazarse/animar a abajo

Question

Estoy tratando de desplazar un div a la parte inferior después de añadir nuevos contenidos (usando agregar)

Aquí es 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); 

Consulte/pruébelo en el violín: http://jsfiddle.net/5ucD3/7/

Muy buggy .. No se desplaza hacia abajo (solo tal vez en los primeros pocos anexos). 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? Calculo que tengo que conseguir de alguna manera la correcta altura, pero no saben cómo

Answer 1

he encontrado una manera que funcione:

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

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

Answer 2

he editado y probado su 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ébelo en vivo en jsFiddle

Answer 3

llego tarde otra vez, pero aquí está mi granito de arena.

A veces, medir elementos dinámicos usando solo una lectura puede ser erróneo porque el contenido que se adjunta puede ser largo, o porque la solicitud ($ .get, $ .post, $ .ajax, etc ...) del contenido es todavía en el aire. Si la cadena que se adjunta proviene de una solicitud, entonces debe usar un método de devolución de llamada para agregar la respuesta.

Lo mejor que puede hacer es una cadena que juntos de esta manera, porque javascript "debe" resolver las funciones de forma sincrónica:

$("#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 lidiando con divs que mutan lo suficientemente rápido.

Por eso, si usted quiere estar bien seguro de que el trabajo se hace, se 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 es inmejorable una devolución de llamada o una línea simple función, pero que resuelve el problema si no sabes exactamente cuándo terminará el apéndice.