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

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

<script type="text/javascript" >

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

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

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

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

Neil

Ответ 1

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

textArea.scrollTop = 99999;

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

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

Ответ 2

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

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

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

Ответ 3

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

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

Ответ 4

В результате я использовал Internet Explorer:

textArea.createTextRange().scrollIntoView(false);

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

textArea.scrollTop = textArea.scrollHeight;