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.$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.



  • 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

    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



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

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


Log in to reply