Keep q-chat scrolled down as new message appears.

zzart

Hi guys,
I’m trying to replicate simple chat functionality using q-chat. I got really stuck to keeping the q-chat element always scrolled to the last element on the list.
.col and .justify-end classes work only for the first few messages and as you starting to add more messages into the chat you have to manually keep q-chat scrolled down.
The problem is I’ve tried all the tricks I knew with js scroll scrollTop etc. - none of it seems to be working . The closest I got was with using this.$refs.chat.scrollIntoView({block: "end"}) but it is still not ideal for longer messages as it aligns with the top of the last message and not the bottom of it.

I’ve coded simple demo: https://codepen.io/zzart/pen/xxwVRXr
Help would be greatly appreciated as I’ve been pulling my hair for over a week now.

zzart

So the question is why Element.scroll() ie. #chat.scroll() functions don’t work for q-chat ??? And if they don’t how do we suppose to scroll q-chat ??

jraez

I add similar issue with scrolling chat messages, but I didn’t use q-chat. I ended up wrapping messages in a q-scroll-area and controlling scroll with

q-scroll-area(ref="messages").fit
  TableChatMessage(:message="msg" v-for="(msg, index) in messages" :key="index" :size="fontSize")

Then you can control the scroll position when you list change

this.$refs.messages.setScrollPosition( ... )

https://quasar.dev/vue-components/scroll-area

zzart

Hi @jraez, thanks for your suggestion. After some restructuring it worked in the end! Thanks a lot!

Fernando2684

@zzart can you share some example?

ilabutk

I worked on the exact same problem. I got this to work:

<q-scroll-area
              ref="first"
              style="height: 330px"
              :delay="350"
              @scroll="onScrollFirst"
            >
 // your div for chat messages here

Then, define methods:

scroll (source, position) {
      this.$refs[source].setScrollPosition(position)
    },

    onScrollFirst ({ verticalPosition }) {
      this.position = verticalPosition + 200
      // this.scroll('first', verticalPosition + 150)
      // console.log(this.position)
    },

At the time you enter/get a message, update the position variable:

        this.scroll('first', this.position), 500)

You need to adjust the height of your components (I used 350 …)