Comment définir par défaut la barre de défilement de la zone de texte en bas?

J'ai une zone de texte qui est rechargée dynamiquement au fur et à mesure que les entrées de l'utilisateur sont envoyées. Elle se rafraîchit toutes les deux secondes. Lorsque la quantité de texte dans cette zone de texte dépasse la taille de la zone de texte, une barre de défilement apparaît. Cependant, la barre de défilement n'est pas vraiment utilisable car si vous commencez à faire défiler vers le bas, quelques secondes plus tard, la zone de texte s'actualise et ramène la barre de défilement vers le haut. Je souhaite que la barre de défilement affiche par défaut le texte le plus bas. Quelqu'un a-t-il une idée de la façon de procéder?

assez simple, en javascript vanille:

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

Vous pouvez l'utiliser avec jQuery

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

J'ai eu le même problème et j'ai découvert qu'il n'y a aucun attribut qui peut être défini initialement pour obtenir le bon comportement de défilement. Cependant, une fois que le texte est mis à jour dans textArea, immédiatement après dans la même fonction, vous pouvez définir le focus () sur textArea pour le faire défiler vers le bas. Vous pouvez également appeler focus()un autre champ de saisie pour permettre à l'utilisateur d'entrer dans ce champ. Cela fonctionne comme du 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();
}