How to scroll to bottom in react?

Question

I want to build a chat system and automatically scroll to the bottom when entering the window and when new messages come in. How do you automatically scroll to the bottom of

Answer 1

thank you 'metakermit' for his good answer, but I think we can make it a bit better, for scroll to bottom, we should use this:

scrollToBottom = () => {
   this.messagesEnd.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });
}

but if you want to scroll top, you should use this:

scrollToTop = () => {
   this.messagesEnd.scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" });
}   

and this codes are common:

componentDidMount() {
  this.scrollToBottom();
}

componentDidUpdate() {
  this.scrollToBottom();
}


render () {
  return (
    

      

        

          {this.renderMessages()}
        
        
 { this.messagesEnd = el; }}>
        
      
    
  );
}