fix: 初回ロード時にスクロール位置が末尾から少し上にズレる不具合を修正

Author: uni-kakurenbo

src/components/Main/MainView/MessagesScroller/composables/useMessageScroller.ts

@@ -1,27 +1,26 @@
-import type { Ref } from 'vue'
+import type { Reactive, Ref } from 'vue'
 import { reactive, watch } from 'vue'
 
 import type { ChangeHeightData } from '/@/components/Main/MainView/MessageElement/composables/useElementRenderObserver'
 import type { LoadingDirection } from '/@/components/Main/MainView/MessagesScroller/composables/useMessagesFetcher'
+import { defer } from '/@/lib/basic/timer'
 import type { MessageId } from '/@/types/entity-ids'
 
 const useMessageScroller = (
   rootRef: Ref<HTMLElement | null>,
-  scrollerProps: {
+  scrollerProps: Reactive<{
     messageIds: MessageId[]
     lastLoadingDirection: LoadingDirection
     entryMessageId?: MessageId
-  }
+  }>
 ) => {
   const state = reactive({
     height: 0,
     scrollTop: 0
   })
 
-  const onChangeHeight = (payload: ChangeHeightData) => {
-    if (!rootRef.value) {
-      return
-    }
+  const onChangeHeight = async (payload: ChangeHeightData) => {
+    if (!rootRef.value) return
 
     if (
       scrollerProps.lastLoadingDirection === 'around' &&
@@ -49,20 +48,34 @@ const useMessageScroller = (
       scrollerProps.lastLoadingDirection === 'former'
     ) {
       const scrollerTop = rootRef.value.getBoundingClientRect().top
+
       // 視界より上にある要素の高さが変わった場合のみ補正する
-      if (payload.top < scrollerTop) {
-        rootRef.value.scrollTo({
-          top: rootRef.value.scrollTop + payload.heightDiff
-        })
+      if (
+        (payload.heightDiff > 0 && payload.bottom < scrollerTop) ||
+        (payload.heightDiff < 0 && payload.top < scrollerTop)
+      ) {
+        rootRef.value.scrollBy({ top: payload.heightDiff })
       }
+
+      const scrollBottom = rootRef.value.scrollTop + rootRef.value.clientHeight
+
+      // 末尾付近を閲覧しているときは，末尾を保つ
+      if (state.height - scrollBottom <= 50) {
+        if (!rootRef.value) return
+
+        // 複数の onChangeHeight が同フレーム内に複数回呼ばれる場合があるので，
+        // すべての更新を待ってからスクロールする
+        await defer()
+        rootRef.value.scrollTo({ top: rootRef.value.scrollHeight })
+      }
+
       state.height = rootRef.value.scrollHeight
     }
   }
 
   const onEntryMessageLoaded = (relativePos: number) => {
-    if (!rootRef.value) {
-      return
-    }
+    if (!rootRef.value) return
+
     const rootHeight = rootRef.value.getBoundingClientRect().height
     rootRef.value.scrollTo({ top: relativePos - rootHeight / 3 })
   }
@@ -94,6 +107,7 @@ const useMessageScroller = (
             rootRef.value.scrollTo({ top: newHeight })
           }
           state.height = newHeight
+
           return
         }
         //上に追加された時はスクロール位置を変更する。
@@ -109,6 +123,7 @@ const useMessageScroller = (
           rootRef.value.scrollTo({
             top: newHeight
           })
+
           state.height = newHeight
         }
       } else state.height = newHeight