CODEWITHSUNDEEP
javascript
BenjiWiebe
BenjiWiebe

Reputation: 2235

Textarea auto-scroll to the bottom

I have a textarea that I append data to with textarea.value += "more text\n"; and I would like it to "stay" scrolled to the bottom, so it would always show the last line.

I have read that I should do:

var textarea = document.getElementById('textarea_id');
textarea.scrollTop = textarea.scrollHeight;

But I tried that (http://jsfiddle.net/BenjiWiebe/mya0u1zo/) and I can't get it to work.

What am I doing wrong?

Upvotes: 11

Views: 30732

Answers (2)

David Spector
David Spector

Reputation: 1671

To answer the original question: since your string output ends with a newline, you should scroll before you output, not after (I keep my ids in an object called id):

function Output(Msg)
  {
  ...
  id.Log.scrollTop=id.Log.scrollHeight;
  SetValue('Log',out);
  }

Upvotes: 1

celeritas
celeritas

Reputation: 2281

You need to set scrollTop each time you append text:

var textarea = document.getElementById('textarea_id');
setInterval(function(){
    textarea.value += Math.random()+'\n';
    textarea.scrollTop = textarea.scrollHeight;
}, 1000);

http://jsfiddle.net/mya0u1zo/2/

Upvotes: 30

Related Questions