Scroll to bottom of IonList? (Ionic v4 React)

Ionic Framework
1

Hi,

I’ve checked the documentation on the ionic react site here and can’t see a method to call for an IonList to scroll to bottom.

Anyone know if this is possible please?

Thanks,

Stephen

3

Hi @supaevensteven, I have the same issue, still I haven’t got any success. I have tried this:-

getContent() {
return document.querySelector(‘ion-content’);
}
scrollToBottom = () => {
this.getContent().scrollToBottom(500);
}

It’s showing me error, "Object is possibly ‘null’. "

If you got any solution please let me know.

4 
  const scrollToBottom = () => {
    let list = document.querySelector("ion-content");
    return list && list.scrollToBottom();
  };
2 Likes
5

Thank you @aaronksaunders, it’s worked.

1 Like
7

In my case, in the docuemnt, there were two <ion-content>.

so use below code.

export const scrollToBottom = (query = 'ion-content') => {
  const list: NodeListOf<HTMLIonContentElement> = document.querySelectorAll(query)
  if (list.length) {
    const content: HTMLIonContentElement = list[list.length - 1]
    content.scrollToBottom()
  }
}
1 Like
8

Why not use useRef?