Tự động cuộn một Textarea

Question

Tôi có phần tử html textarea trên trang của mình được tải lại qua ajax. Toàn bộ văn bản được trả về mỗi lần không chỉ nội dung của nó, và nội dung phát triển theo thời gian. Cùng với sự textarea tôi trả lại mảnh sau javascript:

<script type="text/javascript" > 

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

Trong firefox 3.0.7 này đặt thanh cuộn ở dưới cùng của textArea, cho phép tôi để xem các mới nhất của đầu ra. Tuy nhiên trong IE 7 tôi thấy hành vi khác nhau. Thanh cuộn di chuyển xuống với nội dung như dự định, nhưng khi nội dung lớn hơn chiều cao của văn bản thì thanh cuộn không còn di chuyển xuống nữa. Dường như IE đang nhớ chiều cao cuộn ban đầu của phần tử chứ không phải chiều cao mới.

Tôi đang sử dụng loại tài liệu chuyển tiếp xhtml nếu có. Ngoài ra nếu điều này có thể đạt được với jQuery đó sẽ là tốt như tôi có quyền truy cập vào đó.

Cảm ơn trước

Neil

Answer 1

Là một hack nhanh chóng bạn chỉ có thể làm điều này:

textArea.scrollTop = 99999; 

lựa chọn khác là để thử nó trong một giờ:

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

Answer 2

Thay vì sử dụng hết thời gian chờ, hãy gọi hàm đó trên mọi phản hồi AJAX - miễn là bạn có thể tinh chỉnh nó.

Điều đó sẽ giải phóng trình duyệt của bạn khỏi các thời gian chờ không cần thiết.

Answer 3

Sử dụng jQuery, $ ("textarea"). ScrollHeight (99999) hoạt động tốt trên Firefox và Chrome nhưng không hoạt động trên IE. Nó xuất hiện để đặt nó vào số lượng tối đa các dòng trong vùng văn bản, trong khi scrollHeight được coi là số lượng pixel. (Tuyệt vời hiển thị công việc tuyệt vời IE). Điều này dường như hoạt động:

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

Tôi nghĩ điều này giả định chiều cao phông chữ 12px. Tôi rất thích tìm một cách mạnh mẽ hơn/đơn giản hơn để làm điều này.

Answer 4

tôi đã kết thúc sử dụng này dành cho Internet Explorer:

textArea.createTextRange().scrollIntoView(false); 

và điều này cho các trình duyệt khác:

textArea.scrollTop = textArea.scrollHeight;