Scorrimento dinamico di un'area di testo

Question

Ho un elemento html textarea sulla mia pagina che viene ricaricato tramite Ajax. L'intera area di testo viene restituita ogni volta non solo il suo contenuto e il contenuto cresce nel tempo. Insieme alla textarea restituisco 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 posiziona la barra di scorrimento nella parte inferiore di textArea, permettendomi di vedere l'ultimo dell'output. Tuttavia in IE 7 vedo comportamenti diversi. La barra di scorrimento si sposta verso il basso con il contenuto come previsto, ma una volta che il contenuto è maggiore dell'altezza dell'area di testo, 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 doctype di transizione xhtml se questo aiuta. Anche se ciò può essere ottenuto con jQuery, andrebbe bene dato che ho accesso a questo.

Grazie in anticipo

Neil

Answer 1

Come hack rapido puoi semplicemente fare questo:

textArea.scrollTop = 99999;

Un'altra opzione è provarla in un timer:

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

Answer 2

Usando jQuery, $ (" textarea "). scrollHeight (99999) funziona alla grande su Firefox e Chrome ma non su IE. Sembra impostarlo sul numero massimo di righe nell'area di testo, mentre scrollHeight dovrebbe essere il numero di pixel. (Spettacolo fantastico ottimo lavoro IE). Questo sembra funzionare però:

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

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

Answer 3

Invece di utilizzare il timeout, chiama quella funzione su ogni risposta AJAX, a condizione che tu possa modificarla.

Ciò libererebbe il tuo browser da timeout non necessari.

Answer 4

Ho finito per usarlo per Internet Explorer:

textArea.createTextRange().scrollIntoView(false);

e questo per altri browser:

textArea.scrollTop = textArea.scrollHeight;