Comment garder une barre de défilement toujours en bas?

J'ai une barre de défilement dans un élément div et initialement sa position est supérieure. Chaque fois que j'ajoute du texte à l'élément div, la barre de défilement ne bouge pas. Y a-t-il une manière, la barre de défilement de la position de l'élément div sera toujours en bas et chaque fois que j'ajoute du texte à l'élément div, la barre de défilement va également vers le bas automatiquement?

Voici mon élément div:

<div class='panel-Body scroll' id='messageBody'></div> 

Et classe CSS

 .scroll { height: 450px; overflow: scroll; } 

Ce dont j'ai besoin, c'est initialement que la position de la barre de défilement devrait être en bas.

Aussi, lorsque j'ai cliqué sur un message d'envoi, j'ajoute le message au «messageBody» des éléments div. À cette époque, la barre de défilement devrait être à nouveau réduite.

C'est le style actuel de ma barre de défilement Entrez la description de l'image ici

Et je veux que ce soit toujours Entrez la description de l'image ici

Merci d'avance.

 var messageBody = document.querySelector('#messageBody'); messageBody.scrollTop = messageBody.scrollHeight - messageBody.clientHeight; 

Voici. Suivez ce concept.

 $('#messages').scrollTop($('#messages')[0].scrollHeight); 
 #chatbox-history { overflow: none; position: relative; width: 100%; height: 200px; border: 1px solid #ccc; } #messages { overflow: auto; position: absolute; bottom: 0; width: 100%; max-height: 200px; } #messages div { border: 1px solid #e2e4e3; margin: 5px; padding: 10px; background: #fafafa; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="chatbox-history"> <div id="messages"> <div>asdjf ;asd</div> <div>ajsd fa ;skd f;s</div> <div>asdjf ;akjs d;lf a;lksd fj</div> <div>ajsd fkaj s;dlf a;ljsdl;fkja;lsd f; asd</div> <div>Wassup?</div> </div> </div> 

Quelque chose comme ça devrait faire ce que vous voulez si j'ai bien compris ce que vous voulez.

Remplacez messageBody dans getElementById() avec votre ID de conteneur de message de chat.

 var chatHistory = document.getElementById("messageBody"); chatHistory.scrollTop = chatHistory.scrollHeight; 

Cela fera défiler le conteneur de message vers le bas. Comme la position de défilement est enregistrée en pixels et non en pourcentage, la position de défilement ne change pas lorsque vous ajoutez plus d'éléments dans le conteneur par défaut.

Faites ceci après avoir ajouté un nouveau message dans votre conteneur de message de chat.

Supposons votre code html comme celui-ci.

HTML

 <div id="parentDiv"> <div class="people">1</div> <div class="people">2</div> <div class="people">3</div> <div class="people">4</div> <div class="people">5</div> <div class="people">6</div> <div class="people">7</div> <div class="people">8</div> <div class="people">9</div> </div> 

Et puis enveloppez vos js comme ça

JS

 var objDiv = document.getElementById("parentDiv"); objDiv.scrollTop = objDiv.scrollHeight; 

DEMO