Dynamic div not automatically scrolling

Question

This is a extension to my previous question How to fix a div height.

Thank you all for helping me to fix the size.

But after this I came across my last issue. i.e. scrolling.

when the user enters message and hits an enter, a two new divs are getting added. one with the user data and the other with the response data.

The data is generated correctly, but in the chat window, instead of showing the last div, it is showing the previous div.

Current Output

Expected Output

I visited some SO forums, but none of them did the trick.

Please let me know how can I fix this.

Thanks

Let us know your code. – Facundo La Rocca Jan 11 '17 at 13:27 — Facundo La Rocca, Jan 11 '17 at 13:27

score 1 · Answer 1 · edited May 23 '17 at 12:01

1

You can adapt this code to your situation: [your_element].scrollTop = [your_element].scrollHeight

For more information you can check this question: Scroll Automatically to the Bottom of the Page

edited May 23 '17 at 12:01

Community

answered Jan 11 '17 at 13:37

mickaelw

score 1 · Accepted Answer · edited May 23 '17 at 12:33

Each time a new div is added to the chat window, you will need to scroll the div using JavaScript or jQuery.

something like:

For using jQuery:

$('#chatHistory').scrollTop($('#chatHistory').scrollHeight);

For plain JavaScript:

elmnt = document.getElementById("chatHistory");
elmnt.scrollTop = elmnt.scrollHeight;

2 Answers2