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

92

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?

— moesef
source

Copie possible de Comment avoir une zone de texte à faire défiler vers le bas lors de la mise à jour

— LoganMzz

184

assez simple, en javascript vanille:

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

— Will P.
source

53

Vous pouvez l'utiliser avec jQuery

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

— Mahfud Harun
source

pas vraiment familier avec jQuery. est-ce que je mettrais simplement ceci dans la même zone que javascript ou dois-je créer un nouvel élément <script> et spécifier un nouveau type?

— moesef

1

et ajoutez des balises <script language = 'javascript' src = ' ajax.googleapis.com/ajax/libs/jquery/1.7.1/… > :)

— Will P.

8

Ajouter une dépendance à l'échelle du site juste pour faire quelque chose que vous pouvez faire en JS simple semble être une mauvaise idée. Ce n'est pas parce que vous pouvez le faire.

— emix

0

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

— Mitesh Raval
source