[javascript] 텍스트 영역 스크롤 막대를 기본값으로 아래쪽으로 설정하려면 어떻게합니까?

Program / 글쓴이

사용자 입력이 전송 될 때 동적으로 다시로드되는 텍스트 영역이 있습니다. 2 초마다 새로 고쳐집니다. 이 텍스트 영역의 텍스트 양이 텍스트 영역의 크기를 초과하면 스크롤 막대가 나타납니다. 그러나 스크롤바는 실제로 사용할 수 없습니다. 아래로 스크롤하기 시작하면 몇 초 후 텍스트 영역이 새로 고쳐지고 스크롤바가 맨 위로 다시 올라옵니다. 스크롤 막대를 기본적으로 가장 아래에 텍스트를 표시하도록 설정하고 싶습니다. 누구든지 그렇게하는 방법에 대한 아이디어가 있습니까?

답변

바닐라 자바 ​​스크립트로 아주 간단합니다.

var textarea = document.getElementById('textarea_id');
textarea.scrollTop = textarea.scrollHeight;

답변

이것을 jQuery와 함께 사용할 수 있습니다.

$(document).ready(function(){
    var $textarea = $('#textarea_id');
    $textarea.scrollTop($textarea[0].scrollHeight);
});

답변

나는 같은 문제가 있었고 올바른 스크롤 동작을 얻기 위해 처음에 설정할 수있는 속성이 없다는 것을 알았습니다. 그러나 textArea에서 텍스트가 업데이트되면 동일한 함수에서 즉시 focus ()를 textArea로 설정하여 아래쪽으로 스크롤 할 수 있습니다. 그런 다음 focus()다른 입력 필드 를 호출 하여 사용자가 해당 필드에 입력 할 수 있도록 할 수 있습니다. 이것은 매력처럼 작동합니다.

function myFunc() {
    var txtArea = document.getElementById("myTextarea");
    txtArea.value += "whatever"; // doesn't matter how it is updated
    txtArea.focus();
    var someOtherElem = document.getElementById("smallInputBox");
    someOtherElem.focus();
}

답변

HTML에서 …

<textarea id="logTextArea" style="width:600px;height:200px;"></textarea>

자바 스크립트에서 …

<script language="javascript">

    function loadLog(logValue) {
        logTa = document.getElementById("logTextArea")
        logTa.value = logValue;
        scrollLogToBottom()
    }

    function scrollLogToBottom() {
        logTa = document.getElementById("logTextArea")
        logTa.scrollTop = logTa.scrollHeight;
    }

    loadLog("This is my really long text block from a file ... ")

</script>

새 값을 텍스트 영역에로드 한 후 scrollHeight를 별도의 함수로 설정하는 코드를 입력해야한다는 것을 발견했습니다.

답변