Dynamicznie przewijanie Textarea

Question

Mam element HTML textarea na mojej stronie, który zostanie załadowany ponownie za pośrednictwem ajax. Cały tekst jest zwracany za każdym razem nie tylko jego treści, a zawartość rośnie z czasem. Wraz z pola tekstowego i powrócić następujący fragment javascript:

<script type="text/javascript" > 

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

w Firefoksie 3.0.7 to umieszcza paska przewijania w dolnej części pola tekstowego, co pozwala mi zobaczyć najnowszy wyjścia. Jednak w IE 7 widzę inne zachowanie. Pasek przewijania przesuwa się w dół zgodnie z zamierzoną zawartością, ale gdy zawartość jest większa niż wysokość tekstu, pasek przewijania nie przesuwa się w dół. Wydaje się, że IE pamięta pierwotną wysokość przewijania elementu, a nie nową wysokość.

Używam przejściowego doctora xhtml, jeśli to pomaga. Również jeśli można to osiągnąć za pomocą jQuery, byłoby w porządku, ponieważ mam do tego dostęp.

góry dzięki

Neil

Answer 1

Jako szybki hack, można po prostu to zrobić:

textArea.scrollTop = 99999; 

Inną opcją jest, aby spróbować go w czasomierz:

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

Answer 2

Zamiast używać limitu czasu, wywołaj tę funkcję przy każdej odpowiedzi AJAX - pod warunkiem, że możesz ją poprawić.

To uwolni przeglądarkę od niepotrzebnych przekroczeń czasu.

Answer 3

Używanie jQuery, $ ("textarea"). ScrollHeight (99999) działa doskonale w Firefoksie i Chrome, ale nie w IE. Wygląda na to, że ustawił on maksymalną liczbę linii w obszarze tekstowym, podczas gdy scrollHeight ma być liczbą pikseli. (Fantastyczny pokaz świetnej roboty IE). Wydaje się jednak działać:

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

Sądzę, że zakłada to wysokość czcionki 12 pikseli. Chciałbym znaleźć bardziej solidny/prosty sposób, aby to zrobić.

Answer 4

skończyło się to za pomocą programu Internet Explorer:

textArea.createTextRange().scrollIntoView(false); 

a to dla innych przeglądarek:

textArea.scrollTop = textArea.scrollHeight;