동적으로 텍스트 영역 스크롤하기

Question

내 페이지에 ajax를 통해 다시로드되는 textarea html 요소가 있습니다. 전체 텍스트 영역은 콘텐츠가 아닌 매번 반환되며 콘텐츠는 시간이 지남에 따라 커집니다. 텍스트 영역과 함께 난 자바 스크립트의 다음 조각을 반환 :

이 날 출력의 최신을 볼 수 있도록, 텍스트 영역의 하단에 스크롤 막대를 배치 파이어 폭스 3.0.7에서

<script type="text/javascript" > 

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

. 그러나 IE 7에서 나는 다른 행동을 본다. 스크롤 막대는 의도 한대로 내용이 아래로 이동하지만 내용이 텍스트 영역 높이보다 크면 스크롤 막대가 더 이상 아래로 이동하지 않습니다. IE가 새로운 높이가 아닌 원래의 스크롤 높이를 기억하고있는 것처럼 보입니다.

xhtml transitional doctype을 사용하면 도움이됩니다. 또한 jQuery를 사용하여이 작업을 수행 할 수 있다면 그 작업에 대한 액세스 권한을 얻을 수 있습니다. 사전에

감사

닐

Answer 1

빠른 해킹으로 당신은이 작업을 수행 할 수 있습니다

textArea.scrollTop = 99999; 

또 다른 옵션은 타이머에 그것을 시도하는 것입니다

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

Answer 2

타임 아웃을 사용하는 대신 모든 AJAX 응답에서이 함수를 호출하십시오.

이렇게하면 브라우저에서 불필요한 시간 초과를 방지 할 수 있습니다.

Answer 3

jQuery를 사용하여 $ ("textarea"). scrollHeight (99999)는 Firefox 및 Chrome에서는 작동하지만 IE에서는 작동하지 않습니다. 텍스트 영역의 최대 줄 수로 설정되는 반면 scrollHeight는 픽셀 수로 설정됩니다. (굉장한 훌륭한 직업 IE를 보여준다). 그래도 작동하는 것으로 보입니다.

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

12px 글꼴 높이로 가정합니다. 나는 이것을하기 위해보다 강력하고 직접적인 방법을 찾고 싶다.

Answer 4

나는 인터넷 익스플로러이를 사용하여 종료 :

textArea.createTextRange().scrollIntoView(false); 

를이 다른 브라우저 :

textArea.scrollTop = textArea.scrollHeight;