Show last message in my chat application
Unanswered
American black bear posted this in #help-forum
American black bearOP
I am creating a chat application. In my application, users can send text, video, audio, images. I used width:100% and height:auto for the image.
currently, when the user visits in my chat page, it does not scroll down to show the last message. But I need to show the last message to my user.
How can I do this?
currently, when the user visits in my chat page, it does not scroll down to show the last message. But I need to show the last message to my user.
How can I do this?
14 Replies
What I do is create a self closing div and give it a ref attribute and then:
useEffect(()=>{
ref?.current?.scrollIntoView({behavior:"smooth"})
},[])American black bearOP
@@ts-ignore I have test this function, i have huge message. My message come asynchronously. When I use this function, it start scroll down but stop in random position in middle. How can I fix this?
@American black bear <@510480545160101898> I have test this function, i have huge message. My message come asynchronously. When I use this function, it start scroll down but stop in random position in middle. How can I fix this?
you need to call this everytime you get new message to scroll to bottom
American black bearOP
@@ts-ignore It not working
It start scrolling but stop in middle
that's weird, never happened with me
American black bearOP
Is it problem for asyncronus image loading?
American black bearOP
@@ts-ignore
@American black bear <@510480545160101898>
if you're using Image component then it reserves that space to prevent CLS so no in the case
else yes
can be
American black bearOP
yes, I am usinh Image component.
Is there any solution?ðŸ™