Défilement des DIV débordés avec JavaScript

Question

J'ai un div qui utilise overflow:auto pour conserver le contenu à l'intérieur du div lorsqu'il est redimensionné et déplacé sur la page.J'utilise un ajax pour récupérer des lignes de texte du serveur, puis les ajouter à la fin du div afin que le contenu grandisse vers le bas.Chaque fois que cela se produit, j'aimerais utiliser JS pour faire défiler le div vers le bas afin que le contenu le plus récemment ajouté soit visible, de la même manière qu'une salle de discussion ou une console de ligne de commande fonctionnerait.

Jusqu'à présent, j'ai utilisé cet extrait pour le faire (j'utilise également jQuery, d'où la fonction $()) :

$("#thediv").scrollTop = $("#thediv").scrollHeight;

Cependant, cela m'a donné des résultats incohérents.Parfois, cela fonctionne, parfois non, et cela cesse complètement de fonctionner si l'utilisateur redimensionne le div ou déplace la barre de défilement manuellement.

Le navigateur cible est Firefox 3, et il est déployé dans un environnement contrôlé, il n'a donc pas du tout besoin de fonctionner dans IE.

Des idées les gars ?Celui-ci m'a laissé perplexe.Merci!

Answer 1

scrollHeight devrait être la hauteur totale du contenu. scrollTop spécifie le décalage en pixels dans ce contenu à afficher en haut de la zone client de l'élément.

Donc vous voulez vraiment (toujours en utilisant jQuery) :

$("#thediv").each( function() 
{
   // certain browsers have a bug such that scrollHeight is too small
   // when content does not fill the client area of the element
   var scrollHeight = Math.max(this.scrollHeight, this.clientHeight);
   this.scrollTop = scrollHeight - this.clientHeight;
});

...qui définira le décalage de défilement jusqu'au dernier clientHeight valeur de contenu.

Answer 2

scrollIntoView

Le défiler dans l'affichage La méthode fait défiler l’élément vers l’écran.

Answer 3

Utiliser une boucle pour parcourir un jQuery d'un élément est assez inefficace.Lors de la sélection d'un identifiant, vous pouvez simplement récupérer le premier et unique élément du jQuery en utilisant get() ou la notation [].

var div = $("#thediv")[0];

// certain browsers have a bug such that scrollHeight is too small
// when content does not fill the client area of the element
var scrollHeight = Math.max(div.scrollHeight, div.clientHeight);
div.scrollTop = scrollHeight - div.clientHeight;

Answer 4

$("#thediv").scrollTop($("#thediv")[0].scrollHeight);

Answer 5

Cela peut être fait en simple JS.L'astuce consiste à définir scrollTop sur une valeur égale ou supérieure à la hauteur totale de l'élément (scrollHeight):

const theDiv = document.querySelector('#thediv');
theDiv.scrollTop = Math.pow(10, 10);

Depuis MDN:

S'il est défini sur une valeur supérieure au maximum disponible pour l'élément, ScrollTop se résume à la valeur maximale.

Alors que la valeur de Math.pow(10, 10) j'ai fait l'affaire en utilisant une valeur trop élevée comme Infintiy ou Number.MAX_VALUE réinitialisera scrollTop à 0 (Firefox 66).

Answer 6

J'avais un div enveloppant 3 divs qui flottaient à gauche et dont le contenu était en train d'être redimensionné.Il est utile d'activer les bordures/arrière-plans aux couleurs géniales pour le div-wrapper lorsque vous essayez de résoudre ce problème.Le problème était que le contenu div redimensionné débordait à l'extérieur du div-wrapper (et saignait sous la zone de contenu située sous le wrapper).

Résolu en utilisant la réponse de @ Shog9 ci-dessus.Appliquée à ma situation, voici la mise en page HTML :

<div id="div-wrapper">
  <div class="left-div"></div>
  <div id="div-content" class="middle-div">
  Some short/sweet content that will be elongated by Jquery.
  </div>
  <div class="right-div"></div>
</div>

C'était mon jQuery pour redimensionner le div-wrapper :

<script>
$("#div-content").text("a very long string of text that will overflow beyond the width/height of the div-content");
//now I need to resize the div...
var contentHeight = $('#div-content').prop('scrollHeight')
$("#div-wrapper").height(contentHeight);
</script>

À noter, $('#div-content').prop('scrollHeight') produit la hauteur à laquelle le wrapper doit être redimensionné.De plus, je ne connais aucun autre moyen d'obtenir le scrollHeight, une fonction jQuery réelle ;Ni $('#div-content').scrollTop() ni $('#div-content').height ne produiraient les valeurs réelles de hauteur de contenu.J'espère que cela aidera quelqu'un!