Scroll to bottom in Ionic Vue

Question

I develop a chat app in Ionic Vue. To always see the latest messages, I have to scoll to the bottom automatically.

For web I use vue-chat-scroll, but this does not work with Ionic Vue.

I have tried a lot of different tactics but nothing works:

var objDiv = document.getElementById("your_div");
objDiv.scrollTop = objDiv.scrollHeight;

or

this.scrollIntoView(false);

or

var element = document.getElementById("scroll");
element.scrollIntoView();

or

vue-scroll-to with a hidden anchor at the end of the view

I have also tried different methods of listing the chat messages:

• a combination of IonGrid with Rows
• a normal ul / li list
• just with divs

Answer 1

Take a look at "ion-content" component, https://ionicframework.com/docs/api/content

It has many methods and events for scrolling.

Answer 2

You only need to call the method .scrollToBottom() on the <ion-content> element. You can use the following approach, refering the ion-content with a ref and calling the method scrollToBottom bellow:

<template>
<ion-content ref="content">

</ion-content>
</template>

export default defineComponent({
  methods: {
    scrollToBottom(){
      this.$refs['content'].scrollToBottom()
    }
  },
});
</script>