How to have a textarea to keep scrolled to the bottom when updated

Question

My problem is a bit off the cuff here, so I\'ll try to explain this best I can.

I have a text area, having css of #object{overflow:hidden;resize:none;}.

Answer 1

By using jQuery, you can find out when the content of the textarea changes using:

$("#object").change(function() {
  scrollToBottom();
});

And scroll to the bottom using:

function scrollToBottom() {
  $('#object').scrollTop($('#object')[0].scrollHeight);
}

Scroll code taken from jquerybyexample.blogspot.com.

Answer 2

Generic JQuery Plugin

Here a generic jquery plugin for scrollBottom of any element:

$.fn.scrollBottom = function() {
  return $(this).scrollTop($(this)[0].scrollHeight);
};

usage:

$("#logfile").val( $("#logfile").val() + "this is new line test\n" ).scrollBottom();

Answer 3

Using Javascript

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

Using Jquery

$('#textarea_id').scrollTop($('#textarea_id')[0].scrollHeight);​​​

Answer 4

function checkTextareaHeight(){
   var textarea = document.getElementById("yourTextArea");
   if(textarea.selectionStart == textarea.selectionEnd) {
      textarea.scrollTop = textarea.scrollHeight;
   }
}

Call this function every time when the contents of the textarea are changed. If you cannot edit the external influence, periodically activate this function using setInterval.

Answer 5

You can do it by javascript. Set the scrollTop property of text area with scrollHeight property like below:

document.getElementById("textarea").scrollTop = document.getElementById("textarea").scrollHeight