From 917358dd85ac1a319fc41323bf65cc513423fc6c Mon Sep 17 00:00:00 2001 From: Maksim Sukharev Date: Thu, 17 Oct 2024 11:52:05 +0200 Subject: [PATCH] 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) },