From c2655690089f7018d69b81a9ade5360487c6923c Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Tue, 25 Jul 2023 03:40:42 +0000
Subject: [PATCH] =?UTF-8?q?adjustScroll=E3=82=92=E3=82=84=E3=81=A3?=
 =?UTF-8?q?=E3=81=B1=E3=82=8A=E5=BE=A9=E6=B4=BB=E3=81=95=E3=81=9B=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../frontend/src/components/MkPagination.vue  | 72 ++++++++++++++-----
 1 file changed, 56 insertions(+), 16 deletions(-)

diff --git a/packages/frontend/src/components/MkPagination.vue b/packages/frontend/src/components/MkPagination.vue
index 257f3c5b7..38cdf96fc 100644
--- a/packages/frontend/src/components/MkPagination.vue
+++ b/packages/frontend/src/components/MkPagination.vue
@@ -41,7 +41,7 @@
 import { computed, ComputedRef, isRef, nextTick, onActivated, onBeforeUnmount, onDeactivated, onMounted, ref, watch } from 'vue';
 import * as misskey from 'misskey-js';
 import * as os from '@/os';
-import { isBottomVisible, isTopVisible, getScrollContainer, scrollToBottom, scrollToTop, scrollBy } from '@/scripts/scroll';
+import { isBottomVisible, isTopVisible, getScrollContainer, scrollToBottom, scrollToTop, scrollBy, scroll, getBodyScrollHeight } from '@/scripts/scroll';
 import { useDocumentVisibility } from '@/scripts/use-document-visibility';
 import MkButton from '@/components/MkButton.vue';
 import { defaultStore } from '@/store';
@@ -242,6 +242,54 @@ watch([$$(weakBacked), $$(contentEl)], () => {
 	})();
 });
 
+function preventDefault(ev: Event) {
+	ev.preventDefault();
+}
+
+/**
+ * アイテムを上に追加した場合に追加分だけスクロールを下にずらす
+ * @param fn DOM操作(unshiftItemsなど)
+ */
+async function adjustScroll(fn: () => void): Promise<void> {
+	if (isWebKit) {
+		// Safariでは描画が微妙になるので一定程度スクロールするだけ
+		scrollBy(scrollableElement, { top: TOLERANCE + 4, behavior: 'instant' });
+		// backedを強制的にtrueにする
+		backed = true;
+		await nextTick();
+		fn();
+		return await nextTick();
+	}
+
+	await nextTick();
+	const oldHeight = scrollableElement ? scrollableElement.scrollHeight : getBodyScrollHeight();
+	const oldScroll = scrollableElement ? scrollableElement.scrollTop : window.scrollY;
+	// スクロールをやめさせる
+	try {
+		// なぜかscrollableElementOrHtmlがundefinedであるというエラーが出る
+		scrollableElementOrHtml.addEventListener('wheel', preventDefault, { passive: false });
+		scrollableElementOrHtml.addEventListener('touchmove', preventDefault, { passive: false });
+		// スクロールを強制的に停止
+		scroll(scrollableElement, { top: oldScroll, behavior: 'instant' });
+	} catch (err) {
+		console.error(err, { scrollableElementOrHtml });
+	}
+	fn();
+	return await nextTick(() => {
+		try {
+			const top = oldScroll + ((scrollableElement ? scrollableElement.scrollHeight : getBodyScrollHeight()) - oldHeight);
+			scroll(scrollableElement, { top, behavior: 'instant' });
+			// なぜかscrollableElementOrHtmlがundefinedであるというエラーが出る
+			scrollableElementOrHtml.removeEventListener('wheel', preventDefault);
+			scrollableElementOrHtml.removeEventListener('touchmove', preventDefault);
+		} catch (err) {
+			console.error(err, { scrollableElementOrHtml });
+		}
+		return nextTick();
+	});
+}
+//#endregion
+
 /**
  * 初期化
  * scrollAfterInitなどの後処理もあるので、reload関数を使うべき
@@ -342,7 +390,7 @@ const fetchMore = async (): Promise<void> => {
 			if (i === 10) item._shouldInsertAd_ = true;
 		}
 
-		const reverseConcat = (_res) => concatMapWithArray(items.value, _res);
+		const reverseConcat = (_res) => adjustScroll(() => concatMapWithArray(items.value, _res));
 
 		if (res.length === 0) {
 			if (props.pagination.reversed) {
@@ -503,20 +551,12 @@ async function executeQueue() {
 	const queueArr = Array.from(queue.value.entries());
 	queue.value = new Map(queueArr.slice(props.pagination.limit));
 	isPausingUpdateByExecutingQueue.value = true;
-	if (!backed) {
-		// スクロールが先頭の場合
-		// スクロールを進めることでChromeやFirefoxはいい感じにスクロールを調整してくれる
-		scrollBy(scrollableElement, { top: 24, behavior: 'instant' });
-		// 一応backedを強制的にtrueにする
-		backed = true;
-
-		await nextTick();
-	}
-	unshiftItems(
-		queueArr.slice(0, props.pagination.limit).map(v => v[1]).reverse(),
-		Infinity,
-	);
-	await nextTick();
+	await adjustScroll(() => {
+		unshiftItems(
+			queueArr.slice(0, props.pagination.limit).map(v => v[1]).reverse(),
+			Infinity,
+		);
+	});
 	items.value = new Map([...items.value].slice(0, displayLimit.value));
 	await nextTick();
 	isPausingUpdateByExecutingQueue.value = false;