Динамическая прокрутка текстовой области

Question

У меня на странице есть html-элемент textarea, который перезагружается через ajax.Каждый раз возвращается вся текстовая область, а не только ее содержимое, и со временем содержимое увеличивается.Вместе с текстовой областью я возвращаю следующий фрагмент JavaScript:

<script type="text/javascript" >

var textArea = document.getElementById('outputTextResultsArea');
textArea.scrollTop = textArea.scrollHeight;
</script>

В Firefox 3.0.7 полоса прокрутки размещается внизу текстовой области, что позволяет мне видеть последние результаты вывода.Однако в IE 7 я вижу другое поведение.Полоса прокрутки перемещается вниз вместе с содержимым, как и предполагалось, но как только содержимое превышает высоту текстовой области, полоса прокрутки больше не перемещается вниз.Кажется, что IE запоминает исходную высоту прокрутки элемента, а не новую высоту.

Я использую переходный тип документа xhtml, если это помогает.Кроме того, если этого можно добиться с помощью jQuery, это было бы хорошо, поскольку у меня есть к этому доступ.

заранее спасибо

Нил

Answer 1

В качестве быстрого взлома вы можете просто сделать это:

textArea.scrollTop = 99999;

Другой вариант - попробовать это по таймеру:

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

Answer 2

Используя jQuery, $("textarea").scrollHeight(99999) отлично работает в Firefox и Chrome, но не в IE.Похоже, что для него установлено максимальное количество строк в текстовой области, тогда как ScrollHeight должно быть количеством пикселей.(Потрясающее шоу, отличная работа IE).Хотя это, похоже, работает:

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

Я думаю, это предполагает высоту шрифта 12 пикселей.Мне бы хотелось найти более надежный/простой способ сделать это.

Answer 3

Вместо использования тайм-аута вызывайте эту функцию при каждом ответе AJAX — при условии, что вы можете ее настроить.

Это освободит ваш браузер от ненужных таймаутов.

Answer 4

В итоге я использовал это для Internet Explorer:

textArea.createTextRange().scrollIntoView(false);

и это для других браузеров:

textArea.scrollTop = textArea.scrollHeight;