¿Cómo configuro la barra de desplazamiento del área de texto en la parte inferior como predeterminada?

Tengo un área de texto que se recarga dinámicamente a medida que se envía la entrada del usuario. Se actualiza solo cada dos segundos. Cuando la cantidad de texto en este área de texto excede el tamaño del área de texto, aparece una barra de desplazamiento. Sin embargo, la barra de desplazamiento no se puede usar realmente porque si comienza a desplazarse hacia abajo, un par de segundos después, el área de texto se actualiza y hace que la barra de desplazamiento vuelva a la parte superior. Quiero configurar la barra de desplazamiento para que muestre de forma predeterminada la parte inferior del texto. ¿Alguien tiene una idea de cómo hacerlo?

bastante simple, en javascript vainilla:

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

Puedes usar esto con jQuery

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

Tuve el mismo problema y descubrí que no hay ningún atributo que se pueda configurar inicialmente para obtener el comportamiento de desplazamiento correcto. Sin embargo, una vez que el texto se actualiza en el área de texto, inmediatamente después, en la misma función, puede establecer el foco () en el área de texto para que se desplace hacia abajo. Luego puede llamar focus()a algún otro campo de entrada también para permitir que el usuario ingrese en ese campo. Esto funciona a las mil maravillas:

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();
}

En tu HTML ...

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

En tu 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>

Descubrí que necesita poner el código para configurar scrollHeight en una función separada después de cargar el nuevo valor en el área de texto.