Kevin Powell - Community•2y 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

rishitOP•2y ago

pls help

Mannix•2y ago

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

nublet•2y 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;
}

rishitOP•2y 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•2y ago

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

rishitOP•2y ago

i didnt get u

Jochem•2y ago

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

rishitOP•2y ago

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

scrollIntoView

scrollIntoView

on the last message?

Jochem•2y 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

rishitOP•2y ago

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

Jochem•2y ago

how else is your chat app going to work? I'm going afk for a while, but I'll check back in later

rishitOP•2y 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•2y 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" });
}

rishitOP•2y ago

alr tried

nublet•2y ago

What happen?

rishitOP•2y ago

dsnt scroll to bottom but msgs are in order

nublet•2y ago

I can't use your codepen

nublet•2y ago

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

rishitOP•2y ago

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

Chris Bolson•2y 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)

rishitOP•2y ago

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

Gaming

Programming

Chatbox