동적으로 텍스트 영역을 아래쪽으로 스크롤

저는 방금 javascript와 ajax를 배우기 시작했습니다. 나는 입력 버튼을 누르면 서버에 요청을 보내고 다시 오는 텍스트는 같은 텍스트 영역에 표시되는 텍스트 영역이 있습니다. 서버와의 연결을 관리했지만 텍스트 영역을 응답 후에 스크롤 할 수 없습니다. 이것은 나의 HTML 파일입니다동적으로 텍스트 영역을 아래쪽으로 스크롤

<!DOCTYPE html> 
<html> 
<script type="text/javascript" src="js/ajax.js"></script> 
<body> 
<textarea id="myDiv"></textarea> 
<script type="text/javascript"> 

    var terminal = document.getElementById("myDiv"); 
    console.log(terminal); 
    getBrowserDimensions(); 

    document.getElementById("myDiv").onkeydown = function(event){ 
     var e = event || window.event; 
     if(e.keyCode == 13){ 
      loadXMLDoc(terminal.value); 
     } 
    } 
</script> 
</body> 
</html>

그리고 이것은 내 자바 스크립트 파일입니다

terminal.scrollTop = terminal.scrollHeight - terminal.clientHeight;

그러나 아무것도 변경되지 : 내가 좋아하는이 사이트에서 주로 발견 된 일부 접근 방식을 시도했습니다

function loadXMLDoc(sendString){ 
    var xmlhttp; 
    if(window.XMLHttpRequest){ 
     xmlhttp = new XMLHttpRequest(); 
    }else{ 
     xmlhttp = new ActiveXObject("Microsoft.XMLHHTP"); 
    } 
    xmlhttp.onreadystatechange=function(){ 
     if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ 
      terminal.value += xmlhttp.responseText+'\n'; 
     } 
    } 
    xmlhttp.open("POST", "php/demo_get.php", true); 
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
    xmlhttp.send(sendString); 
    terminal.scrollTop = terminal.scrollHeight; 
    console.log("1: " + terminal.scrollTop); 
    console.log("2: " + terminal.scrollHeight); 
} 

function getBrowserDimensions(){ 
    var x = window.innerWidth; 
    var y = window.innerHeight; 
    var terminalWidth = Math.floor(x * 0.95); 
    var terminalHeight = Math.floor(y * 0.95); 
    terminal.value += "width: " + x + " height: " + y + " tWidth : " + terminalWidth + '\n'; 
    terminal.style.width = terminalWidth + "px"; 
    terminal.style.height = terminalHeight + "px"; 
    terminal.style.resize = "none"; 
}

. 텍스트 영역은 스크롤 할 수있는 높이의 중간에 계속 설정됩니다. 9999와 같은 고정 숫자로 scrollTop을 설정해도 아무 것도 달라지지 않습니다. 나는 파이어 폭스와 크롬에서 이것을 시도했다. 나는 또한 jquery를 사용하지 않아야한다. 그래서 내가 뭘 잘못하고 있는지에 대한 아이디어 나 제안이 크게 감사 될 것이다.

출처

2014-02-16 Klimid1689

그냥 [텍스트 영역을 가지고하는 방법 업데이트 아래로 스크롤을 계속하는]의'scrollTop = scrollHeight' – Archer

가능 중복해야한다 시도/7373081/how-to-have-a-textarea-to-the-bottom-when-updated) – Archer

"그냥 scrollTop이어야합니다. = scrollHeight"는 무엇을 의미합니까? 객체의 이러한 메소드가 아닙니까? 가능한 복제본을 보았지만 여전히 작동하는 솔루션을 제공하지는 못합니다. – Klimid1689

ajax 호출은 비동기식입니다. 즉, 호출을하고, 완료되었을 때 이벤트 처리기를 만든 다음 실제로 발생하기 전에 scrollTop 값을 설정하는 것을 의미합니다. http://stackoverflow.com/questions (이 대신 ...

function loadXMLDoc(sendString){ 
    var xmlhttp; 
    if(window.XMLHttpRequest){ 
     xmlhttp = new XMLHttpRequest(); 
    }else{ 
     xmlhttp = new ActiveXObject("Microsoft.XMLHHTP"); 
    } 
    xmlhttp.onreadystatechange=function(){ 
     if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ 
      terminal.value += xmlhttp.responseText+'\n'; 
      terminal.scrollTop = terminal.scrollHeight; 
      console.log("1: " + terminal.scrollTop); 
      console.log("2: " + terminal.scrollHeight); 
     } 
    } 
    xmlhttp.open("POST", "php/demo_get.php", true); 
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
    xmlhttp.send(sendString); 
}

출처

2014-02-16 17:08:24 Archer

ok! 그게 내 마음을 넘지 않을거야. 나를 위해 더 많은 공부 스터디 스터디. 고맙습니다. 완벽하게 일했습니다. :) – Klimid1689

문제 없습니다 - 도와 드리겠습니다. 행운을 빕니다 :) – Archer

동적으로 텍스트 영역을 아래쪽으로 스크롤

답변

관련 문제