How do I get scrollbar.scrollTo to work on dynamic content?

[JulianParge]

I have a chat bot with a scrollable window that doesn't quite scroll to the bottom when new content is added.

I am using the following code once a user submits their chat prompt:
$('#chat_window .scroll-content').append('<div class="chat-local-wrap"><div class="chat-local chats">'+chatData+'</div></div>'); var height = $('.scroll-content').height(); scrollbar.scrollTo(0, height, 0);

At this point, an ajax request is sent to the bot, and on completion of that request, I run the above again... however, it seems to stop short of the bottom of the scrollable element, so the response is only partially in view. The ajax request sometimes takes up to 10 seconds to process because it's retrieving the response from OpenAI, however, I am running the above code on 'complete', so it should be able to calculate the new height after the response (i.e., on 'complete'), and then take the user to the bottom of the scrollable element so that the response is fully in view.

Could you advise if there is a shortcut to scroll to the bottom in complete, or alternatively advise where I may be going wrong?

[sadeghbarati]

Hi,

smooth-scrollbar automatically updates itself with ResizeObserver after you append new element to the document

You can use addMomentum

append is synchronous so you can get size of the appended element after You append element

$('#chat_window .scroll-content').append('<div class="chat-local-wrap"><div class="chat-local chats">'+chatData+'</div></div>');
scrollbar.addMomentum(0, size of appnded element)

[JulianParge]

That's really helpful, many thanks for the quick response!