Search code examples
javascriptjqueryhtmlcss

How to keep a scrollbar always bottom?

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?

Here's my div element: 

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

And CSS class

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

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

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.

This is the current style of my scroll-bar enter image description here

And I want it to be always enter image description here

Thanks in advance.

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