DEV Community

MOHSIN ALI SOOMRO
MOHSIN ALI SOOMRO

Posted on

Scroll bottom when message recieve in chat reactjs

  const messagesEndRef:any = useRef(null) 
const scrollToBottom = () => {
    if (messagesEndRef) {
      messagesEndRef.current.addEventListener('DOMNodeInserted', (event:any) => {
        const { currentTarget: target } = event;
        target.scroll({ top: target.scrollHeight, behavior: 'smooth' });
      });
    }
  }

 <div style={{height:"73vh",overflowY:"scroll",marginBottom:"50px"}} ref={messagesEndRef} >
      {messages &&
        messages.map((message:any) => 
          <ChatItem
            key={message.index}
            message={message}
            email={user.attributes.email}/>
        )}

      </div>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay