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
Rishit
CodePen
NWOZRWq
...
21 Replies
rishit
rishit2y ago
pls help
Mannix
Mannix2y ago
I'm just throwing an idead maybe get the last message and use scrollIntoView()???
nublet
nublet2y ago
or onsubmit execute this function
function scrollToBottom() {
const chatContainer = document.getElementById("chat-container");
chatContainer.scrollTop = chatContainer.scrollHeight;
}
function scrollToBottom() {
const chatContainer = document.getElementById("chat-container");
chatContainer.scrollTop = chatContainer.scrollHeight;
}
rishit
rishit2y ago
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
Jochem
Jochem2y ago
you'll have to update the frontend, when you do that you can use scrollIntoView
rishit
rishit2y ago
i didnt get u
Jochem
Jochem2y ago
you say there will be more message, so you can't use scrollintoview
rishit
rishit2y ago
wait ig u mean that i can take the messages array and on submit do
scrollIntoView
scrollIntoView
on the last message?
Jochem
Jochem2y ago
I'm saying every time you update the front end to add more messages, you can use scrollintoview to go to the last one
rishit
rishit2y ago
so whenever sm1 sends a msg i update the frontend???
Jochem
Jochem2y ago
how else is your chat app going to work? I'm going afk for a while, but I'll check back in later
rishit
rishit2y ago
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
nublet
nublet2y ago
do this then
function scrollToBottom() {
const chatContainer = document.getElementById("chat-container");
const lastMessage = chatContainer.lastElementChild;
lastMessage.scrollIntoView({ behavior: "smooth", block: "end" });
}
function scrollToBottom() {
const chatContainer = document.getElementById("chat-container");
const lastMessage = chatContainer.lastElementChild;
lastMessage.scrollIntoView({ behavior: "smooth", block: "end" });
}
rishit
rishit2y ago
alr tried
nublet
nublet2y ago
What happen?
rishit
rishit2y ago
dsnt scroll to bottom but msgs are in order
nublet
nublet2y ago
I can't use your codepen
nublet
nublet2y ago
I'm not an expert on codepen so idk how to resolve this
rishit
rishit2y ago
ig u clicked on sumb btn? just reload the pg gotta sleep now see yall in 12hrs
Chris Bolson
Chris Bolson2y ago
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)
rishit
rishit2y ago
thanks every1 for ur help but i had to scrap this project
Want results from more Discord servers?
Add your server