fix: より古いメッセージを新たに読み込んだとき、スクロール位置が下にずれてしまう問題を修正

src/components/Main/MainView/MessagesScroller/MessagesScroller.vue

@@ -166,7 +166,9 @@ const { stampsMapFetched } = useStampsStore()
 const rootRef = shallowRef<HTMLElement | null>(null)
 const state = reactive({
   height: 0,
-  scrollTop: lastScrollPosition.value
+  scrollTop: lastScrollPosition.value,
+  // 古いメッセージを読み込むとき、読み込み開始直後は高さの調整を無効化する
+  skipResizeAdjustment: false
 })
 
 const { onChangeHeight, onEntryMessageLoaded } =
@@ -229,10 +231,18 @@ watch(
       }
       //上に追加された時はスクロール位置を変更する。
       if (props.lastLoadingDirection === 'former') {
+        // onChangeHeight の調整を一時的に無効化
+        state.skipResizeAdjustment = true
         rootRef.value.scrollTo({
           top: newHeight - state.height
         })
         state.height = newHeight
+        // 十分に DOMが更新されたら無効化を解除
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            state.skipResizeAdjustment = false
+          })
+        })
       }
 
       if (props.lastLoadingDirection === 'latest') {

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

@@ -14,6 +14,7 @@ const useMessageScrollerElementResizeObserver = (
   },
   viewPortState: {
     height: number
+    skipResizeAdjustment?: boolean
   }
 ) => {
   const onChangeHeight = (payload: ChangeHeightData) => {
@@ -44,6 +45,10 @@ const useMessageScrollerElementResizeObserver = (
       scrollerProps.lastLoadingDirection === 'latest' ||
       scrollerProps.lastLoadingDirection === 'former'
     ) {
+      // 古いメッセージを読み込んですぐはここで高さの調整をしない
+      if (viewPortState.skipResizeAdjustment) {
+        return
+      }
       rootRef.value.scrollTop += payload.heightDiff
       viewPortState.height = rootRef.value.scrollHeight
     }