From 877a7a81bba32febe1decc611c1bb2f598d116a0 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Thu, 13 Jul 2023 04:38:04 +0000
Subject: [PATCH] ?

---
 .../frontend/src/components/MkPagination.vue  | 33 ++++++-------------
 .../frontend/src/pages/antenna-timeline.vue   |  1 -
 packages/frontend/src/scripts/scroll.ts       | 16 +++++----
 3 files changed, 20 insertions(+), 30 deletions(-)

diff --git a/packages/frontend/src/components/MkPagination.vue b/packages/frontend/src/components/MkPagination.vue
index 71c110b67a..6d8ab687c8 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, getBodyScrollHeight, getScrollContainer, scrollToBottom, scroll, scrollToTop } from '@/scripts/scroll';
+import { isBottomVisible, isTopVisible, getBodyScrollHeight, getScrollContainer, scrollToBottom, scrollToTop, scroll } from '@/scripts/scroll';
 import { useDocumentVisibility } from '@/scripts/use-document-visibility';
 import MkButton from '@/components/MkButton.vue';
 import { defaultStore } from '@/store';
@@ -151,7 +151,8 @@ const {
 const displayLimit = computed(() => props.pagination.displayLimit ?? props.pagination.limit * 2);
 
 const contentEl = $computed(() => props.pagination.pageEl ?? rootEl);
-const scrollableElement = $computed(() => contentEl ? getScrollContainer(contentEl) ?? document.body : document.body);
+const scrollableElement = $computed(() => contentEl ? getScrollContainer(contentEl) ?? null : null);
+const scrollableElementOrHtml = $computed(() => scrollableElement ?? document.getElementsByName('html')[0]);
 
 const visibility = useDocumentVisibility();
 
@@ -173,7 +174,7 @@ watch([() => props.pagination.reversed, $$(scrollableElement)], () => {
 		weakBacked = entries[0].isIntersecting;
 		if (weakBacked) backed = true;
 	}, {
-		root: scrollableElement,
+		root: scrollableElementOrHtml,
 		rootMargin: props.pagination.reversed ? '-100% 0px 100% 0px' : '100% 0px -100% 0px',
 		threshold: 0.1, // 10%ぐらいになったらqueueを読む
 	});
@@ -219,7 +220,7 @@ watch([$$(weakBacked), $$(contentEl)], () => {
 		// とりあえず評価してみる
 		onScroll();
 
-		const container = scrollableElement;
+		const container = scrollableElementOrHtml;
 
 		function removeListener() { container.removeEventListener('scroll', onScroll); }
 		container.addEventListener('scroll', onScroll, { passive: true });
@@ -232,11 +233,12 @@ watch([$$(weakBacked), $$(contentEl)], () => {
  * @param fn DOM操作(unshiftItemsなどで)
  */
 function adjustScroll(fn: () => void): Promise<void> {
-	const oldHeight = scrollableElement.scrollHeight;
-	const oldScroll = scrollableElement.scrollTop;
+	const oldHeight = scrollableElement ? scrollableElement.scrollHeight : getBodyScrollHeight();
+	const oldScroll = scrollableElement ? scrollableElement.scrollTop : window.scrollY;
+
 	fn();
 	return nextTick(() => {
-		const top = oldScroll + (scrollableElement.scrollHeight - oldHeight);
+		const top = oldScroll + ((scrollableElement ? scrollableElement.scrollHeight : getBodyScrollHeight()) - oldHeight);
 		scroll(scrollableElement, { top, behavior: 'instant' });
 		if (top > TOLERANCE) {
 			weakBacked = true;
@@ -349,22 +351,7 @@ const fetchMore = async (): Promise<void> => {
 			if (i === 10) item._shouldInsertAd_ = true;
 		}
 
-		const reverseConcat = _res => {
-			const oldHeight = scrollableElement ? scrollableElement.scrollHeight : getBodyScrollHeight();
-			const oldScroll = scrollableElement ? scrollableElement.scrollTop : window.scrollY;
-
-			items.value = concatMapWithArray(items.value, _res);
-
-			return nextTick(() => {
-				if (scrollableElement) {
-					scroll(scrollableElement, { top: oldScroll + (scrollableElement.scrollHeight - oldHeight), behavior: 'instant' });
-				} else {
-					window.scroll({ top: oldScroll + (getBodyScrollHeight() - oldHeight), behavior: 'instant' });
-				}
-
-				return nextTick();
-			});
-		};
+		const reverseConcat = (_res) => adjustScroll(() => concatMapWithArray(items.value, _res));
 
 		if (res.length === 0) {
 			if (props.pagination.reversed) {
diff --git a/packages/frontend/src/pages/antenna-timeline.vue b/packages/frontend/src/pages/antenna-timeline.vue
index 693259a0e5..327f1b4b14 100644
--- a/packages/frontend/src/pages/antenna-timeline.vue
+++ b/packages/frontend/src/pages/antenna-timeline.vue
@@ -20,7 +20,6 @@
 <script lang="ts" setup>
 import { computed, watch } from 'vue';
 import MkTimeline from '@/components/MkTimeline.vue';
-import { scroll } from '@/scripts/scroll';
 import * as os from '@/os';
 import { useRouter } from '@/router';
 import { definePageMetadata } from '@/scripts/page-metadata';
diff --git a/packages/frontend/src/scripts/scroll.ts b/packages/frontend/src/scripts/scroll.ts
index 5826d4d31f..94f5757b35 100644
--- a/packages/frontend/src/scripts/scroll.ts
+++ b/packages/frontend/src/scripts/scroll.ts
@@ -70,12 +70,16 @@ export function onScrollBottom(el: HTMLElement, cb: () => unknown, tolerance = 1
 	return removeListener;
 }
 
-export function scroll(el: HTMLElement, options: ScrollToOptions | undefined) {
-	const container = getScrollContainer(el);
-	if (container == null) {
+/**
+ * コンテナを指定してスクロールする
+ * @param el Container element
+ * @param options ScrollToOptions
+ */
+export function scroll(el: HTMLElement | null, options: ScrollToOptions | undefined) {
+	if (el == null) {
 		window.scroll(options);
 	} else {
-		container.scroll(options);
+		el.scroll(options);
 	}
 }
 
@@ -84,8 +88,8 @@ export function scroll(el: HTMLElement, options: ScrollToOptions | undefined) {
  * @param el Scroll container element
  * @param options Scroll options
  */
-export function scrollToTop(el: HTMLElement, options: { behavior?: ScrollBehavior; } = {}) {
-	scroll(el, { top: 0, ...options });
+export function scrollToTop(el: HTMLElement | null, options: { behavior?: ScrollBehavior; } = {}) {
+	scroll(getScrollContainer(el), { top: 0, ...options });
 }
 
 /**