From b99e4aceab98ec80425bfaa2bf8ac3b4449a668f Mon Sep 17 00:00:00 2001 From: Maksim Sukharev Date: Thu, 17 Oct 2024 11:52:05 +0200 Subject: [PATCH 1/2] fix(chat): handle scroll direction - update previous scroll position in scroll event (not after it's finished) - store direction while scrolling - ensure debounceHandleScroll is fired before endScroll Signed-off-by: Maksim Sukharev --- src/components/MessagesList/MessagesList.vue | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue index d2dd85c47ea..a07339b4d22 100644 --- a/src/components/MessagesList/MessagesList.vue +++ b/src/components/MessagesList/MessagesList.vue @@ -171,7 +171,7 @@ export default { stopFetchingOldMessages: false, - isScrolling: false, + isScrolling: null, stickyDate: null, @@ -856,12 +856,13 @@ export default { }) }, - onScroll() { + onScroll(event) { // handle scrolling status if (this.isScrolling) { clearTimeout(this.endScrollTimeout) } - this.isScrolling = true + this.isScrolling = this.previousScrollTopValue > event.target.scrollTop ? 'up' : 'down' + this.previousScrollTopValue = event.target.scrollTop this.endScrollTimeout = setTimeout(this.endScroll, 3000) // handle sticky date if (this.$refs.scroller.scrollTop === 0) { @@ -909,14 +910,13 @@ export default { if (Math.abs(scrollOffset - clientHeight) < SCROLL_TOLERANCE && !this.hasMoreMessagesToLoad && scrollTop > 0) { this.setChatScrolledToBottom(true) this.displayMessagesLoader = false - this.previousScrollTopValue = scrollTop this.debounceUpdateReadMarkerPosition() return } this.setChatScrolledToBottom(false) - if ((scrollHeight > clientHeight && scrollTop < 800 && scrollTop < this.previousScrollTopValue) + if ((scrollHeight > clientHeight && scrollTop < 800 && this.isScrolling === 'up') || skipHeightCheck) { if (this.loadingOldMessages || this.isChatBeginningReached) { // already loading, don't do it twice @@ -934,12 +934,12 @@ export default { this.setChatScrolledToBottom(false, { auto: true }) } - this.previousScrollTopValue = this.$refs.scroller.scrollTop this.debounceUpdateReadMarkerPosition() }, endScroll() { - this.isScrolling = false + this.debounceHandleScroll.flush?.() + this.isScrolling = null clearTimeout(this.endScrollTimeout) }, From cae139d6e2591e15572d0533522a9f451fa385ef Mon Sep 17 00:00:00 2001 From: Maksim Sukharev Date: Thu, 17 Oct 2024 16:41:54 +0200 Subject: [PATCH 2/2] fix(chat): disable smooth scroll to bottom Signed-off-by: Maksim Sukharev --- src/components/ChatView.vue | 6 +++--- src/components/MessagesList/MessagesList.vue | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/ChatView.vue b/src/components/ChatView.vue index 8532fc8f93c..3e21aa6130d 100644 --- a/src/components/ChatView.vue +++ b/src/components/ChatView.vue @@ -37,7 +37,7 @@ :aria-label="t('spreed', 'Scroll to bottom')" :title="t('spreed', 'Scroll to bottom')" class="scroll-to-bottom__button" - @click="smoothScrollToBottom"> + @click="scrollToBottom"> @@ -198,8 +198,8 @@ export default { this.$store.dispatch('initialiseUpload', { files, token: this.token, uploadId }) }, - smoothScrollToBottom() { - EventBus.emit('scroll-chat-to-bottom', { smooth: true, force: true }) + scrollToBottom() { + EventBus.emit('scroll-chat-to-bottom', { smooth: false, force: true }) }, }, diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue index a07339b4d22..5e232334fab 100644 --- a/src/components/MessagesList/MessagesList.vue +++ b/src/components/MessagesList/MessagesList.vue @@ -298,7 +298,7 @@ export default { } // scroll to bottom if needed - this.scrollToBottom({ smooth: true }) + this.scrollToBottom({ smooth: false }) if (this.conversation?.type === CONVERSATION.TYPE.NOTE_TO_SELF) { this.$nextTick(() => { @@ -639,7 +639,7 @@ export default { if (!isFocused) { // Safeguard 2: in case the fallback message is not found too // scroll to bottom - this.scrollToBottom({ force: true }) + this.scrollToBottom({ smooth: false, force: true }) } else { this.$store.dispatch('setVisualLastReadMessageId', { token: this.token,