Как установить полосу прокрутки текстового поля вниз по умолчанию?

У меня есть текстовое поле, которое динамически перезагружается по мере отправки пользовательского ввода. Оно обновляется каждые пару секунд. Когда объем текста в этом текстовом поле превышает размер текстового поля, появляется полоса прокрутки. Однако полосу прокрутки на самом деле нельзя использовать, потому что, если вы начнете прокручивать вниз, через пару секунд текстовое поле обновится и вернет полосу прокрутки вверх. Я хочу, чтобы полоса прокрутки по умолчанию отображала самый нижний текст. Кто-нибудь знает, как это сделать?

довольно просто, в ванильном javascript:

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>

В вашем Javascript ...

<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 в отдельную функцию после загрузки нового значения в текстовую область.