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 …)

[jrhopkins83]

I tried this approach but it kept scrolling down when I tried to manually scroll up (with mouse or keyboard)… The scroll area appears to jump up and down.

I figured out that manually scrolling in the scroll area triggered the scroll event (I’m a little slow) which triggered the onScrollFirst method.

So my approach is only to scroll to the bottom when first entering the chat screen using the mounted hook and when the user enters a new message. Obviously it won’t scroll to the bottom if someone else enters a chat after the user scrolls up. But the trade off is that the user’s chat window won’t keep jumping to the bottom every time someone enters a message.

I used the function I found in this git issue: https://github.com/quasarframework/quasar/issues/6167.

Here’s my code:

html snippet:
<q-card class=“chat-list-card” flat bordered>
<q-scroll-area
ref=“chatScroll”
>

methods and mounted hook:
methods: {
…mapActions(‘messages’, [‘addMessage’]),
scroll () {
const scrollArea = this.$refs.chatScroll
const scrollTarget = scrollArea.getScrollTarget()
const duration = 350
scrollArea.setScrollPosition(scrollTarget.scrollHeight, duration)
},
async sendMessage () { // executed when user clicks ‘send’ button
try {
const messagesRef = firebaseStore.collection(‘messages’)
const newMessage = {
uid: this.message.uid,
playerName: this.message.playerName,
text: this.message.text,
avatarUrl: this.message.avatarUrl,
timestamp: Timestamp.fromDate(new Date())
}
await messagesRef.add(newMessage)
this.message.text = ‘’
this.scroll()
} catch (error) {
showMessage(‘Error’, Error saving new message to Firebase Database: ${error.message})
}
}
},
mounted () {
this.scroll()
}

[metalsadman]

@jrhopkins83 thx for sharing. for readability, you can wrap the snippet in triple back ticks `.