CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Adam Silva
Adam Silva

Reputation: 1047

jQuery Div Scroll Down After Each Append

I have a div that is serving as a chat, and depending on the users actions I append messages. I want it so, after each message is appended, the div will scroll down. However, it's not working 100%.

Here is the fiddle to check out: https://jsfiddle.net/mfj1ub8c/

I'm pretty sure it has something to do with the delays/fadein/hide methods on each append, but they need to be there to give a certain effect that is needed.

Any ideas on how to solve this?

Upvotes: 0

Views: 2146

Answers (2)

Steven
Steven

Reputation: 121

The problem is scrollDown is being called before the element is actually shown (display: block) by fadeIn, so the scroll height hasn't changed yet. If you call scrollDown after fadeIn is complete, you'd miss the animation when the new content is off-screen. What you want to do is scroll when the element is displayed, but still transparent (opacity: 0). If you are on jQuery 1.8+ you can use the start option.

Here is a working fiddle https://jsfiddle.net/mfj1ub8c/2/

Also you are overshooting your scrollTop, which won't cause you problems here, but it should be the whole height minus the visible height.

$('#chat').prop("scrollHeight") - $('#chat').height()

Upvotes: 2

H77
H77

Reputation: 5967

Call scrollDown only when fadeIn is complete. You can use the complete callback parameter of fadeIn.

e.g.

.fadeIn(500, scrollDown))

Fixed fiddle: https://jsfiddle.net/mfj1ub8c/1/

Upvotes: 2

Related Questions