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 jsscroll
scrollTop
etc. - none of it seems to be working . The closest I got was with usingthis.$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( ... )
-
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 …)