web-dev-qa-db-fra.com

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

Mon problème est un peu hors de portée ici, donc je vais essayer d'expliquer cela du mieux que je peux.

J'ai une zone de texte, ayant css de #object{overflow:hidden;resize:none;}. J'essaie de l'empêcher de générer une barre de défilement tout en se redimensionnant. Cette zone de texte est synchronisée avec la console d'un script externe, ce qui signifie qu'elle est mise à jour. Par défaut cependant, il restera en haut à moins que vous ne mettiez en surbrillance du texte, en le faisant glisser vers le bas de l'élément. Ce serait le seul moyen de faire défiler vers le bas autrement qu'avec les touches fléchées, naturellement.

Par programme, existe-t-il un moyen de garder la zone de texte vers le bas lors de la mise à jour? Ce serait bien de le faire défiler automatiquement pour s'adapter à son cas d'utilisation.

javascripthtmlcssscrolltextarea
22
TERMtm

Vous pouvez le faire par javascript. Définissez la propriété scrollTop de la zone de texte avec la propriété scrollHeight comme ci-dessous:

document.getElementById ("textarea"). scrollTop = document.getElementById ("textarea"). scrollHeight 
31
Ujjwal Manandhar

En utilisant jQuery, vous pouvez savoir quand le contenu de textarea change en utilisant:

$("#object").change(function() {
  scrollToBottom();
});

Et faites défiler vers le bas en utilisant:

function scrollToBottom() {
  $('#object').scrollTop($('#object')[0].scrollHeight);
}

Code de défilement tiré de jquerybyexample.blogspot.com .

22
Adam Bailin

en utilisant Javascript

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

en utilisant Jquery

$('#textarea_id').scrollTop($('#textarea_id')[0].scrollHeight);​​​
7
ViPuL5

Plugin générique JQuery

Voici un plugin générique jquery pour scrollBottom de n'importe quel élément:

$.fn.scrollBottom = function() {
  return $(this).scrollTop($(this)[0].scrollHeight);
};

usage:

$("#logfile").val( $("#logfile").val() + "this is new line test\n" ).scrollBottom();
2
Roland
function checkTextareaHeight(){
   var textarea = document.getElementById("yourTextArea");
   if(textarea.selectionStart == textarea.selectionEnd) {
      textarea.scrollTop = textarea.scrollHeight;
   }
}

Appelez cette fonction à chaque fois que le contenu de la zone de texte est modifié. Si vous ne pouvez pas modifier l'influence externe, activez périodiquement cette fonction à l'aide de setInterval.

1
Rob W