How to keep a scrollbar always bottom? : <p>I have a scroll-bar in a div element and initially it's position is top. Whenever i add some text to the div element then the scroll-bar does not move. Is there any way, the scroll-bar of the div element's position will be always bottom and whenever I add some text to the div element, the scroll-bar also goes to the bottom automatically?</p>

<p>Here's my div element: </p>

<pre><code>&lt;div class='panel-Body scroll' id='messageBody'&gt;&lt;/div&gt;
</code></pre>

<p>And CSS class</p>

<pre><code>.scroll {
            height: 450px;
            overflow: scroll;  
        }
</code></pre>

<p>What i need is, initially the position of the scroll-bar should be bottom.</p>

<p>Also when i clicked a send message, I'm adding the message to the div elements 'messageBody'. On that time the the scroll-bar should be down again.</p>

<p>This is the current style of my scroll-bar
<a href="https://i.stack.imgur.com/OYcQ6.png" rel="noreferrer"><img src="https://i.stack.imgur.com/OYcQ6.png" alt="enter image description here"></a></p>

<p>And I want it to be always
<a href="https://i.stack.imgur.com/7zw1c.png" rel="noreferrer"><img src="https://i.stack.imgur.com/7zw1c.png" alt="enter image description here"></a></p>

<p>Thanks in advance.</p>
