Navigation

    Quasar Framework

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Keep q-chat scrolled down as new message appears.

    Help
    4
    6
    63
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Z
      zzart last edited by

      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.

      1 Reply Last reply Reply Quote 0
      • Z
        zzart last edited by

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

        1 Reply Last reply Reply Quote 0
        • J
          jraez last edited by

          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

          1 Reply Last reply Reply Quote 0
          • Z
            zzart last edited by

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

            1 Reply Last reply Reply Quote 0
            • F
              Fernando2684 last edited by

              @zzart can you share some example?

              1 Reply Last reply Reply Quote 0
              • I
                ilabutk last edited by

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

                1 Reply Last reply Reply Quote 0
                • First post
                  Last post