Level 104
Get the last child, and use the scrollIntoView
let el = document.getElementById('communication').lastElementChild;
el.scrollIntoView({behavior: 'smooth'});
Jan 20, 2022
5
Level 1
scroll down to the last item
I'm working on chat application and i would like to scroll down to the last message received, I'm using Vuejs3 Itried a lot of plugins and codes, didnt worked for me this is my div :
<div class="chat-history" style="height: calc(100vh - 60px - 50px);overflow-y: auto;">
<ul class="m-b-0" id="communication">
<li> Msg 1 </li>
<li> Msg 2 </li>
<li> Msg 3 </li>
</ul>
</div>
Level 1
@tykus should be in created or mounted :) ?
Level 1
@tykus created() { let el = document.getElementById('communication').lastElementChild; el.scrollIntoView({behavior: 'smooth'}); }
Error : Uncaught TypeError: document.getElementById(...) is null
Level 104
@AmineBHD too soon, the component is not rendered. You can use $nextTick to wait
1 like
Level 1
@tykus God Bless
Please or to participate in this conversation.