Kevin Powell - Community•13mo ago

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•13mo ago

pls help

Mannix•13mo ago

I'm just throwing an idead maybe get the last message and use scrollIntoView()???

nublet•13mo 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•13mo 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•13mo ago

you'll have to update the frontend, when you do that you can use scrollIntoView

rishit•13mo ago

i didnt get u

Jochem•13mo ago

you say there will be more message, so you can't use scrollintoview

rishit•13mo ago

wait ig u mean that i can take the messages array and on submit do

scrollIntoView

scrollIntoView

on the last message?

Jochem•13mo 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•13mo ago

so whenever sm1 sends a msg i update the frontend???

Jochem•13mo 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•13mo 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•13mo 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•13mo ago

alr tried

nublet•13mo ago

What happen?

rishit•13mo ago

dsnt scroll to bottom but msgs are in order

nublet•13mo ago

I can't use your codepen

nublet•13mo ago

I'm not an expert on codepen so idk how to resolve this

rishit•13mo ago

ig u clicked on sumb btn? just reload the pg gotta sleep now see yall in 12hrs

Chris Bolson•13mo 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•13mo ago

thanks every1 for ur help but i had to scrap this project

Gaming

Programming

Chatbox