채팅 reactjs에서 메시지가 수신되면 맨 아래로 스크롤

3925 단어
  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>

좋은 웹페이지 즐겨찾기