Keep q-chat scrolled down as new message appears.

  • 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.${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:
    Help would be greatly appreciated as I’ve been pulling my hair for over a week now.

  • 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 ??

  • 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

      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( ... )

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

  • @zzart can you share some example?

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

                  style="height: 330px"
     // your div for chat messages here

    Then, define methods:

    scroll (source, 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 …)

Log in to reply