How to use scrollToBottom with IonContent in React

Ionic Framework Ionic React
1

Hi,

I’m building a chat app and I want to make sure that the user always sees the bottom of the list of messages.

<IonContent ref={this.messagesRef}>

and then I call this function from a few places

 scrollToBottom = () => {
        if (!this.messagesRef || !this.messagesRef.current) return;
        //window.scrollTo(0, this.messagesRef.current.offsetTop)
        this.messagesRef.current.scrollToBottom();
        //scrollIntoView({ behavior: "smooth" });
        console.log("ScrollToTheBottom");
    }

But when I do this I get the following error:

TypeError: this.messagesRef.current.scrollToBottom is not a function

What am I doing wrong here?

Thanks!

2

This is what I have done.

3

Thanks @aaronksaunders.

I tried that but it did not work because scrollToBottom does not exist on the element. I must be missing something simple.

image
image1200×900 27 KB

4

It looks like using ``setTimeout is the only way around this problem. I callscheduleScrollToBottom at the end ofcomponentDidMount` and every time a new message gets either entered by the user or received from the server.

messagesRef relates to an empty div at the bottom of the screen.

scheduleScrollToBottom = () => {
        setTimeout(this.scrollToBottom, 5000);
    }

    scrollToBottom = () => {

        if (!this.messagesRef || !this.messagesRef.current) return;

        this.messagesRef.current.scrollIntoView({ behavior: "smooth" });
    }
5

see this example in codesandbox on how to scroll to a specific item in a list

6

Thanks. So this means scrollToBottom doesn’t work in React?

7

I have the exact problem. scrollToTop works with React, but scrollToBottom doesn’t work :frowning:

Check my latest comment here for a dirty quickfix…:

8

the point i you really are not scrolling to the bottom, you are scrolling to the last message entered in the list… that i why I believed the solution i provided made sense