Como defino a barra de rolagem textarea para baixo como padrão?

Eu tenho uma textarea que está sendo recarregada dinamicamente conforme a entrada do usuário está sendo enviada. Ela se atualiza a cada dois segundos. Quando a quantidade de texto nesta área de texto excede o tamanho da área de texto, uma barra de rolagem é exibida. No entanto, a barra de rolagem não é realmente utilizável porque se você começar a rolar para baixo, alguns segundos depois a área de texto será atualizada e trará a barra de rolagem de volta ao topo. Desejo definir a barra de rolagem para mostrar, por padrão, o texto mais abaixo. Alguém tem ideia de como fazer?

muito simples, em vanilla javascript:

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

Você pode usar isso com jQuery

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

Eu tive o mesmo problema e descobri que não há nenhum atributo que pode ser definido inicialmente para obter o comportamento de rolagem correto. No entanto, uma vez que o texto é atualizado na textArea, imediatamente após na mesma função você pode definir o focus () para textArea para fazê-lo rolar para baixo. Você também pode chamar focus()algum outro campo de entrada para permitir que o usuário insira nesse campo. Isso funciona como um charme:

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