From 8cbcbd462c1cbfa6256441f5c9b8331660409eb9 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 25 Mar 2025 11:11:24 +0900
Subject: [PATCH] =?UTF-8?q?enhance(frontend):=20=E3=83=81=E3=83=A3?=
 =?UTF-8?q?=E3=83=83=E3=83=88=E7=94=BB=E9=9D=A2=E3=81=A7=E7=A2=BA=E5=AE=9F?=
 =?UTF-8?q?=E3=81=AB=E6=9C=80=E4=B8=8B=E9=83=A8=E3=81=B8=E3=82=B9=E3=82=AF?=
 =?UTF-8?q?=E3=83=AD=E3=83=BC=E3=83=AB=E8=BF=BD=E5=BE=93=E3=81=99=E3=82=8B?=
 =?UTF-8?q?=E3=82=88=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/pages/chat/room.vue     | 25 +++++++++++++++++--
 .../frontend/src/use/use-mutation-observer.ts | 21 ++++++++++++++++
 2 files changed, 44 insertions(+), 2 deletions(-)
 create mode 100644 packages/frontend/src/use/use-mutation-observer.ts

diff --git a/packages/frontend/src/pages/chat/room.vue b/packages/frontend/src/pages/chat/room.vue
index 7aeb1f788a..8ffaf233cf 100644
--- a/packages/frontend/src/pages/chat/room.vue
+++ b/packages/frontend/src/pages/chat/room.vue
@@ -25,7 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 		</div>
 
-		<div v-else class="_gaps">
+		<div v-else ref="timelineEl" class="_gaps">
 			<div v-if="canFetchMore">
 				<MkButton :class="$style.more" :wait="moreFetching" primary rounded @click="fetchMore">{{ i18n.ts.loadMore }}</MkButton>
 			</div>
@@ -75,7 +75,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { ref, useTemplateRef, computed, watch, onMounted, nextTick, onBeforeUnmount, onDeactivated, onActivated } from 'vue';
 import * as Misskey from 'misskey-js';
-import { isTailVisible } from '@@/js/scroll.js';
+import { getScrollContainer, isTailVisible } from '@@/js/scroll.js';
 import XMessage from './XMessage.vue';
 import XForm from './room.form.vue';
 import XSearch from './room.search.vue';
@@ -92,6 +92,7 @@ import { definePage } from '@/page.js';
 import { prefer } from '@/preferences.js';
 import MkButton from '@/components/MkButton.vue';
 import { useRouter } from '@/router.js';
+import { useMutationObserver } from '@/use/use-mutation-observer.js';
 
 const $i = ensureSignin();
 const router = useRouter();
@@ -109,6 +110,26 @@ const user = ref<Misskey.entities.UserDetailed | null>(null);
 const room = ref<Misskey.entities.ChatRoom | null>(null);
 const connection = ref<Misskey.ChannelConnection<Misskey.Channels['chatUser'] | Misskey.Channels['chatRoom']> | null>(null);
 const showIndicator = ref(false);
+const timelineEl = useTemplateRef('timelineEl');
+
+const SCROLL_HEAD_THRESHOLD = 200;
+
+// column-reverseなので本来はスクロール位置の最下部への追従は不要なはずだが、おそらくブラウザのバグにより、最下部にスクロールした状態でも追従されない場合がある(スクロール位置が少数になることがあるのが関わっていそう)
+// そのため補助としてMutationObserverを使って追従を行う
+useMutationObserver(timelineEl, {
+	subtree: true,
+	childList: true,
+	attributes: false,
+}, () => {
+	const scrollContainer = getScrollContainer(timelineEl.value)!;
+	// column-reverseなのでscrollTopは負になる
+	if (-scrollContainer.scrollTop < SCROLL_HEAD_THRESHOLD) {
+		scrollContainer.scrollTo({
+			top: 0,
+			behavior: 'instant',
+		});
+	}
+});
 
 function normalizeMessage(message: Misskey.entities.ChatMessageLite | Misskey.entities.ChatMessage) {
 	const reactions = [...message.reactions];
diff --git a/packages/frontend/src/use/use-mutation-observer.ts b/packages/frontend/src/use/use-mutation-observer.ts
new file mode 100644
index 0000000000..b35dbcd7a8
--- /dev/null
+++ b/packages/frontend/src/use/use-mutation-observer.ts
@@ -0,0 +1,21 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { onUnmounted, watch } from 'vue';
+import type { Ref, ShallowRef } from 'vue';
+
+export function useMutationObserver(targetNodeRef: Ref<HTMLElement | undefined>, options: MutationObserverInit, callback: MutationCallback): void {
+	const observer = new MutationObserver(callback);
+
+	watch(targetNodeRef, (targetNode) => {
+		if (targetNode) {
+			observer.observe(targetNode, options);
+		}
+	}, { immediate: true });
+
+	onUnmounted(() => {
+		observer.disconnect();
+	});
+}