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)