ion-content method scrollToPoint not working on Ionic 5

Question

I am following this ionic5 and github documentation in order to programmatically scroll my page to a point. Following is the code

getContent() {
      return document.querySelector('ion-content');
}

scrollPage() {
      this.getContent().scrollToPoint(100,100);
}

Method scrollToPoint() is not doing anything. Is there another way of calling this method?

Answer 1

You can not apply methods at item obtained by selector. You must be select this ion-content with @ViewChild and can use methods:

@ViewChild(IonContent) content: IonContent;

content.scrollToPoint(100,100);

Answer 2

In case somebody is having trouble with this using VueJS + Ionic 6. I got it working by storing the $ref in my data() on mounted(). Don't forget to add the ref attribute like so: <ion-content ref="myContent">.

data() {
  return {
    myCustomContent: null
  };
}

In your mounted()

mounted() {
  this.myCustomContent = this.$refs.myContent.$el;
}

Your method:

scrollFunction() {
  this.myCustomContent.scrollToBottom(500);
}