Chatbox
I wanna create a chatbox w/ scss n vanilla js but i'm struggling with making it so that it scrolls to the bottom when a new message is received
Codepen : https://codepen.io/RS_2009/pen/NWOZRWq
21 Replies
pls help
I'm just throwing an idead maybe get the last message and use
scrollIntoView()
???or onsubmit execute this function
But this ain't just Fe it will be integrated into a backend and so the last message will keep changing. Thanks for the suggestion anyw
Tysm
wait no
it makes it so that the last msg will be on top
you'll have to update the frontend, when you do that you can use
scrollIntoView
i didnt get u
you say there will be more message, so you can't use scrollintoview
wait ig u mean that i can take the messages array and on submit do on the last message?
I'm saying every time you update the front end to add more messages, you can use scrollintoview to go to the last one
so whenever sm1 sends a msg i update the frontend???
how else is your chat app going to work?
I'm going afk for a while, but I'll check back in later
it will be a fullstack app where any1 can send a msg
i wont hv to update the frontend anytime sm1 sends a msg
but this shud work too shudnt it?
its like this rn just for testing
do this then
alr tried
What happen?
dsnt scroll to bottom but msgs are in order
I can't use your codepen
I'm not an expert on codepen so idk how to resolve this
ig u clicked on sumb btn?
just reload the pg
gotta sleep now
see yall in 12hrs
Just to chip in... your codepen is a mix of jQuery and vanilla JavaScript and, as far as I could tell, you aren't including jQuery.
I have made a fork of your code and swapped out the jQuery for vanilla JS.
Rather than trying to create a clone of an existing message, I suggest that you use a template as this is exactly the sort of thing that they are designed for and will require less work for the JS.
Here is my codepen if to see if there is anything that might help you resolve your issues
https://codepen.io/cbolson/pen/poxXdQj
(I realise that the message will actually come from the server but I wanted to help you at least get the chat scrolling to the most recent message)
thanks every1 for ur help but i had to scrap this project