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