dinamicamente Scrolling una textarea

Question

Ho un elemento HTML textarea sulla mia pagina che viene ricaricata tramite la tecnologia AJAX. L'intera textarea viene restituita ogni volta, non solo il suo contenuto, e il contenuto cresce nel tempo. Insieme con la textarea torno il seguente pezzo di javascript:

<script type="text/javascript" > 

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

in Firefox 3.0.7 questo pone la barra di scorrimento nella parte inferiore dell'area di testo, che mi permette di vedere l'ultimo dell'uscita. Tuttavia in IE 7 vedo un comportamento diverso. La barra di scorrimento si sposta verso il basso con il contenuto come previsto, ma una volta che il contenuto è maggiore dell'altezza della textarea, la barra di scorrimento non si sposta più verso il basso. Sembra che IE stia ricordando l'altezza di scorrimento originale dell'elemento, non la nuova altezza.

Sto usando il xhtml DOCTYPE di transizione se questo aiuta. Inoltre, se ciò può essere ottenuto con jQuery, ciò andrebbe bene in quanto ho accesso a questo.

Grazie in anticipo

Neil

Answer 1

Come un trucco veloce si può semplicemente fare questo:

textArea.scrollTop = 99999; 

Un'altra opzione è quella di provare in un timer:

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

Answer 2

Invece di usare il timeout, chiama quella funzione su ogni risposta AJAX, a patto di poterla modificare.

che avrebbe liberato il browser dal timeout inutili.

Answer 3

utilizzando jQuery, $ ("textarea"). ScrollHeight (99999) funziona alla grande su Firefox e Chrome, ma non su IE. Sembra impostarlo sul numero massimo di righe nella textarea, mentre scrollHeight dovrebbe essere il numero di pixel. (Fantastico spettacolo, ottimo lavoro IE). Ciò sembra funzionare comunque:

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

Penso che questo presupponga un'altezza di carattere 12px. Mi piacerebbe trovare un modo più solido/diretto per farlo.

Answer 4

ho finito per usare questo per Internet Explorer:

textArea.createTextRange().scrollIntoView(false); 

e questo per altri browser:

textArea.scrollTop = textArea.scrollHeight;