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

And I want it to be always

Thanks in advance.

1

6 Answers

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

3

Something like this should do what you want if I understood what you want correctly.

Replace messageBody in getElementById() with your chat message container id.

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

This will scroll the message container to the bottom. Since scroll position is recorded in pixel and not percentage, the scroll position doesn't change as you add more elements into the container by default.

Do this after you have appended a new message into your chat message container.

8

Assume your html code like this.

HTML

<div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div>
</div>

And then wrap your js like this

JS

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

DEMO

Here you go. Follow this 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=""></script>
<div> <div> <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>

1

That'd be :: messageBody.lastChild.scrollIntoView(); //for the initial scroll to bottom position.

---

p.s.: After the page load, this command should be called by your message handler on message update.

3

It's already 2023 and you can simply use Element.scrollIntoView() now! Check MDN documentation.

var messageBody = document.querySelector('#messageBody');
messageBody.scrollIntoView();

——-

11 June Updated

For those who downvote this answer, plz make sure you have an element fixed in the bottom of a scroll area as the target, and call this function every time the content updated. Besides, please check the MDN doc and ensure your browser meet the requirement!

2

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.