Dynamically Scrolling a Textarea

Question

I have a textarea html element on my page that gets reloaded via ajax. The whole textarea is returned each time not just its content, and the content grows over time. Along

Answer 1

Using jQuery, $("textarea").scrollHeight(99999) works great on Firefox and Chrome but not on IE. It appears to set it to the max number of lines in the textarea, whereas scrollHeight is supposed to be the number of pixels. (Awesome show great job IE). This appears to work though:

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

I think this assumes a 12px font-height. I would love to find a more robust/straightforward way to do this.

Answer 2

Instead of using the timeout, call that function on every AJAX response - provided you can tweak it.

That would free your browser from unnecessary timeouts.

Answer 3

As a quick hack you can just do this:

textArea.scrollTop = 99999;

Another option is to try it in a timer:

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

Answer 4

For using like textarea in your example give your textarea a name like "id=LiveTextArea"

Then add buttom of your javascript this (LiveTextArea is the id name):

LiveTextArea.scrollTop = LiveTextArea.scrollHeight;

So would look like:

var textArea = document.getElementById('outputTextResultsArea');

textArea.scrollTop = textArea.scrollHeight;

Now the textarea will dynamicly scroll caret/down on any new entry.

Answer 5

I ended up using this for Internet Explorer:

textArea.createTextRange().scrollIntoView(false);

and this for other browsers:

textArea.scrollTop = textArea.scrollHeight;