diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue index 09237eab2b6..e9cbb9d00d1 100644 --- a/src/components/MessagesList/MessagesList.vue +++ b/src/components/MessagesList/MessagesList.vue @@ -173,6 +173,8 @@ export default { dateSeparatorLabels: {}, endScrollTimeout: () => {}, + + isScrollingToBottom: false, } }, @@ -939,6 +941,10 @@ export default { endScroll() { this.isScrolling = false + // set timeout to avoid flickering + setTimeout(() => { + this.isScrollingToBottom = false + }, 500) clearTimeout(this.endScrollTimeout) }, @@ -1103,6 +1109,7 @@ export default { let newTop if (options?.force) { newTop = this.$refs.scroller.scrollHeight + this.isScrollingToBottom = true this.setChatScrolledToBottom(true) } else if (!this.isSticky) { // Reading old messages @@ -1273,6 +1280,11 @@ export default { }, onMessageHeightChanged({ heightDiff }) { + if (this.isScrollingToBottom || heightDiff <= 0) { + // Don't scroll while the user is scrolling + // or if the height difference is negative (e.g. when a message is deleted) + return + } // scroll down by the height difference this.$refs.scroller.scrollTop += heightDiff },