最新メッセージを読み込んだときにスクロールが上に吹き飛ぶ問題を修正

traPtitech · Oct 27, 2024 · 68d238f · 68d238f
1 parent fa5ac65
commit 68d238f
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 22 deletions.
diff --git a/src/components/Main/MainView/ChannelView/ChannelViewContent/ChannelViewContentMain.vue b/src/components/Main/MainView/ChannelView/ChannelViewContent/ChannelViewContentMain.vue
@@ -12,7 +12,7 @@
       @request-load-former="onLoadFormerMessagesRequest"
       @request-load-latter="onLoadLatterMessagesRequest"
       @scroll-passive="handleScroll"
-      @reset-is-reached-latest="resetIsReachedLatest"
+      @window-viewd="onWindowViewd"
     >
       <template #default="{ messageId, onChangeHeight, onEntryMessageLoaded }">
         <messages-scroller-separator
@@ -117,11 +117,10 @@ const messagePinnedUserMap = computed(
   () => new Map(props.pinnedMessages.map(pin => [pin.message.id, pin.userId]))
 )
 
-const resetIsReachedLatest = () => {
+const onWindowViewd = () => {
   const unread = unreadChannelsMap.value.get(props.channelId)
   if (unread === undefined) return
   //最後まで読み込まれている時は「ここから未読」の位置を修正し、未読を消す。
-  //TODO: 関数名とやってることが違いすぎるので、どうにかする。今日はもう眠いので寝る。
   if (
     unread.updatedAt ===
     messagesMap.value.get(messageIds.value.at(-1) ?? '')?.createdAt

diff --git a/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue b/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue
@@ -150,7 +150,7 @@ const props = withDefaults(
 const emit = defineEmits<{
   (e: 'requestLoadFormer'): void
   (e: 'requestLoadLatter'): void
-  (e: 'resetIsReachedLatest'): void
+  (e: 'windowViewd'): void
   (e: 'scrollPassive'): void
 }>()
 
@@ -192,15 +192,16 @@ watch(
     if (!rootRef.value) return
     /* state.height の更新を忘れないようにすること */
     const newHeight = rootRef.value.scrollHeight
+    if (ids.length - prevIds.length === -1) {
+      // 削除された場合は何もしない
+      state.height = newHeight
+      return
+    }
     if (
       props.lastLoadingDirection === 'latest' ||
-      props.lastLoadingDirection === 'former'
+      props.lastLoadingDirection === 'former' ||
+      props.isReachedLatest
     ) {
-      if (ids.length - prevIds.length === -1) {
-        // 削除された場合は何もしない
-        state.height = newHeight
-        return
-      }
       // XXX: 追加時にここは0になる
       if (ids.length - prevIds.length === 0) {
         const scrollBottom =
@@ -215,11 +216,13 @@ watch(
         state.height = newHeight
         return
       }
-      rootRef.value.scrollTo({
-        top: newHeight - state.height
-      })
-    }
-    state.height = newHeight
+      //上に追加された時はスクロール位置を変更する。
+      if (props.lastLoadingDirection === 'former') {
+        rootRef.value.scrollTo({
+          top: newHeight - state.height
+        })
+      }
+    } else state.height = newHeight
   },
   { deep: true, flush: 'post' }
 )
@@ -244,17 +247,17 @@ const requestLoadMessages = () => {
 const handleScroll = throttle(17, requestLoadMessages)
 
 const visibilitychangeListener = () => {
-  emit('resetIsReachedLatest')
+  emit('windowViewd')
   if (document.visibilityState === 'visible') {
     nextTick(requestLoadMessages)
   }
 }
 const focusListener = () => {
-  emit('resetIsReachedLatest')
+  emit('windowViewd')
   nextTick(requestLoadMessages)
 }
 const blurListener = () => {
-  emit('resetIsReachedLatest')
+  emit('windowViewd')
 }
 onMounted(() => {
   document.addEventListener('visibilitychange', visibilitychangeListener)

diff --git a/src/components/Main/MainView/MessagesScroller/composables/useMessagesFetcher.ts b/src/components/Main/MainView/MessagesScroller/composables/useMessagesFetcher.ts
@@ -114,10 +114,6 @@ const useMessageFetcher = (
         isLoading.value = false
         isInitialLoad.value = false
         lastLoadingDirection.value = 'latter'
-        // 一番新しいメッセージに達した時は`latest`にする
-        if (isReachedLatest.value) {
-          lastLoadingDirection.value = 'latest'
-        }
         messageIds.value = [...new Set([...messageIds.value, ...newMessageIds])]
       }
     )