Desplazamiento dinámico de un Textarea

Question

Tengo un elemento textarea html en mi página que se vuelve a cargar a través de ajax. Todo el área de texto se devuelve cada vez, no solo su contenido, y el contenido crece con el tiempo. Junto con el área de texto vuelvo el siguiente fragmento de código JavaScript:

<script type="text/javascript" > 

var textArea = document.getElementById('outputTextResultsArea'); 
textArea.scrollTop = textArea.scrollHeight; 
</script> 

en Firefox 3.0.7 esto coloca la barra de desplazamiento en la parte inferior de la caja de texto, lo que me permite ver más de la salida. Sin embargo, en IE 7 veo un comportamiento diferente. La barra de desplazamiento se mueve hacia abajo con el contenido deseado, pero una vez que el contenido es mayor que la altura del área de texto, la barra de desplazamiento ya no se mueve hacia abajo. Parece que IE está recordando la altura de desplazamiento original del elemento, no la nueva altura.

Estoy utilizando el doctype transitorio xhtml si eso ayuda. Además, si esto se puede lograr con jQuery, estaría bien ya que tengo acceso a eso.

Gracias de antemano

Neil

Answer 1

Como un corte rápido que sólo puede hacer esto:

textArea.scrollTop = 99999; 

Otra opción es tratar de que en un temporizador:

setTimeout(function() 
{ 
    var textArea = document.getElementById('outputTextResultsArea'); 
    textArea.scrollTop = textArea.scrollHeight; 
}, 10); 

Answer 2

En lugar de utilizar el tiempo de espera, llame a esa función en cada respuesta AJAX, siempre que pueda modificarla.

Eso liberaría su navegador de tiempos de espera innecesarios.

Answer 3

Usando jQuery, $ ("textarea"). ScrollHeight (99999) funciona muy bien en Firefox y Chrome, pero no en IE. Parece establecerlo en el número máximo de líneas en el área de texto, mientras que scrollHeight se supone que es el número de píxeles. (Impresionante espectáculo excelente trabajo IE). Esto parece funcionar bien:

 $("textarea").scrollTop(99999) 
     $("textarea").scrollTop($("textarea").scrollTop()*12) 

Creo que esto supone una fuente de 12px de altura. Me encantaría encontrar una forma más robusta/directa para hacer esto.

Answer 4

Terminé usando esto para Internet Explorer:

textArea.createTextRange().scrollIntoView(false); 

y esto para otros navegadores:

textArea.scrollTop = textArea.scrollHeight;