Scroll Chat messages, automatically, to the bottom
I am using the theme HTML, demo 5, Metronic 7.2.9 and implementing chat functionality.
Due to a lot of messages, when the page is loaded, I need to scroll automatically to be positioned in the bottom - showing the last message. How can I get it?
Thanks
Replies (3)
Hi,
You just need to calculate the height of the scrollable messages container and use javascript:
const el = document.querySelector("#kt_messages_container");
el.scrollTop = el.scrollHeight;<div class="scroll scroll-pull" >
...
</div>Regards.
Hi Sean,
There is no property we can mention in the below div to turn on auto scroll to the last message?
<div
className='card-body'
id={isDrawer ? 'kt_drawer_chat_messenger_body' : 'kt_chat_messenger_body'}
>
<div
className={clsx('scroll-y me-n5 pe-5', { 'h-300px h-lg-auto': !isDrawer })}
data-kt-element='messages'
data-kt-scroll='true'
data-kt-scroll-activate='{default: false, lg: true}'
data-kt-scroll-max-height='auto'
