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

Question

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

<script type="text/javascript" >

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

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

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

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

Neil

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)

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

Answer 3

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

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

Answer 4

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

textArea.createTextRange().scrollIntoView(false);

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

textArea.scrollTop = textArea.scrollHeight;