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


97

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


답변:


190

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

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

동일한 코드 블록에 텍스트 영역을 방금로드 한 경우 작동하지 않습니다. 제대로 작동하려면이 코드를 별도의 함수에 넣은 다음 새 텍스트 영역 값을로드 한 후 호출하십시오. 그러면 원하는대로 작동합니다.
blissweb

55

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

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

jQuery에별로 익숙하지 않습니다. 이것을 자바 스크립트와 같은 영역에 넣거나 새 <script> 요소를 만들고 새 유형을 지정해야합니까?
moesef 2012

1
그리고 <script language = 'javascript'src = ' ajax.googleapis.com/ajax/libs/jquery/1.7.1/… > 태그 추가 :)
Will P.

8
평범한 JS에서 할 수있는 일을하기 위해 사이트 전체 의존성을 추가하는 것은 나쁜 생각처럼 들립니다. 할 수 있다고해서 그렇게해야한다는 뜻은 아닙니다.
emix

0

나는 같은 문제가 있었고 올바른 스크롤 동작을 얻기 위해 처음에 설정할 수있는 속성이 없다는 것을 알았습니다. 그러나 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();
}

0

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를 별도의 함수로 설정하는 코드를 입력해야한다는 것을 발견했습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.