Как иметь текстовое поле для прокрутки вниз при обновлении

Моя проблема немного от манжеты здесь, поэтому я постараюсь объяснить это как можно лучше.

У меня есть текстовая область, имеющая css #object{overflow:hidden;resize:none;}. Я пытаюсь предотвратить его от появления полосы прокрутки, а также изменить размер. Это текстовое поле синхронизируется с внешней консолью script, что означает ее обновление. По умолчанию, однако, он останется наверху, если вы не выделите текст, перетащив его в нижнюю часть элемента. Естественно, это был бы единственный способ прокрутки вниз, кроме клавиш со стрелками.

Программно, есть ли способ сохранить область текста внизу при обновлении? Было бы неплохо, если бы он автоматически прокручивался, чтобы разместить его вариант использования.

Ответ 1

Вы можете сделать это с помощью javascript. Установите для свойства scrollTop текстовой области свойство scrollHeight, как показано ниже:

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

Ответ 2

Используя jQuery, вы можете узнать, когда изменяется содержимое textarea, используя:

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

И прокрутите вниз, используя:

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

Код прокрутки, взятый из jquerybyexample.blogspot.com.

Ответ 3

Использование Javascript

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

Использование JQuery

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

Ответ 4

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

Вызывать эту функцию каждый раз, когда изменяется содержимое текстового поля. Если вы не можете редактировать внешнее влияние, периодически активируйте эту функцию с помощью setInterval.

Ответ 5

Общий плагин JQuery

Вот общий плагин jquery для scrollBottom любого элемента:

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

использование:

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