Cannot read property 'scrollIntoView' of undefined in Reactjs

Question

I am trying to scroll div to button when page loaded and added a new message in the list.

but here I am getting error 'scrollIntoView' undefined.

This is my code what I have tried so far

     componentDidUpdate() {
       this.scrollToBottom ()
      }

     componentDidMount() {
       this.scrollToBottom ()
      }

       scrollToBottom = () => {
      this.messagesEnd.scrollIntoView({ behavior: "smooth",  });
     } 
  <div style={{ float:"left", clear: "both" }}
  ref={(el) => (this.messagesEnd = el)}>
  </div>

what Is wrong here why it is showing this error.

Your help would be highly appropriated

Welcome Kuldeed! Thanks for sharing your problem with us. We'd like to help you. Therefore we will need more information as well as a more specific problem description: 1) Could you copy-paste the exact error message? 2) Could you add more lines of code? 3) Your text is kind of hard to read. May I recapture it and send you a proposal how I have read your question? — Michael W. Czechowski
– Michael W. Czechowski, Commented Sep 26, 2019 at 9:31
@MichaelCzechowski Hi, Thanks for your reply, Actually here I want to scroll to bottom when component loaded and new item added in list, so after researching on internet I have came across with this method but facing issue ScrollView undefined — K.S
– K.S, Commented Sep 26, 2019 at 9:44
In order to get help you should provide your messagesend as well — behzad
– behzad, Commented Sep 26, 2019 at 10:01

Andres · Accepted Answer · 2019-09-26 10:33:26Z

4

You can try to adjust scrollToBottom() method like:

scrollToBottom = () => 
      this.messagesEnd && this.messagesEnd.scrollIntoView({ behavior: "smooth",  });

answered Sep 26, 2019 at 10:33

Andres

1,0027 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

K.S · Accepted Answer · 2019-09-27 05:22:01Z

1

I got solution of my problem. HTML

 <div className="main-comment" ref={(elem) => this.container = elem}>
    //Your another div or content goes here
      </div>

in.ts page code

componentDidMount(){
this. scrollToBottom()
}
 componentDidUpdate(){
    this.scrollToBottom()
    }


 scrollToBottom = () => {
      if(this.container){
      this.container.scrollTop = this.container.scrollHeight
       }

edited Sep 27, 2019 at 5:22

answered Sep 27, 2019 at 5:16

K.S

4631 gold badge12 silver badges31 bronze badges

Collectives™ on Stack Overflow

Cannot read property 'scrollIntoView' of undefined in Reactjs

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related