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

score 0 · Answer 1 · answered Feb 01 '22 at 14:17

0

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

It has many methods and events for scrolling.

answered Feb 01 '22 at 14:17

A.Dadkhah

78
1
7

Thank you very much, but that's what i came up with too - and it didn't work! – Sascha Feb 02 '22 at 15:43

score 0 · Answer 2 · answered Sep 27 '22 at 00:06

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>

Scroll to bottom in Ionic Vue

2 Answers2