From b6d9894ed931249b3105cfbd071915b6652380da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=BE=E3=81=A3=E3=81=A1=E3=82=83=E3=81=A8=E3=83=BC?=
 =?UTF-8?q?=E3=81=AB=E3=82=85?=
 <17376330+u1-liquid@users.noreply.github.com>
Date: Tue, 25 Jul 2023 02:35:38 +0900
Subject: [PATCH] fix(frontend): scroll error (#112)

Co-authored-by: dumbfox <benkang666@gmail.com>
---
 packages/frontend/src/components/MkPagination.vue | 12 ++++++------
 packages/frontend/src/nirax.ts                    | 11 ++++-------
 2 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/packages/frontend/src/components/MkPagination.vue b/packages/frontend/src/components/MkPagination.vue
index b9a75f6002..693098f2bd 100644
--- a/packages/frontend/src/components/MkPagination.vue
+++ b/packages/frontend/src/components/MkPagination.vue
@@ -128,7 +128,7 @@ const moreFetching = ref(false);
 const more = ref(false);
 const preventAppearFetchMore = ref(false);
 const preventAppearFetchMoreTimer = ref<number | null>(null);
-const isBackTop = ref(false);
+const isActive = ref(false);
 const empty = computed(() => items.value.size === 0);
 const error = ref(false);
 const {
@@ -167,8 +167,8 @@ watch($$(rootEl), () => {
 	});
 });
 
-watch([$$(backed), $$(contentEl)], () => {
-	if (!backed) {
+watch([$$(backed), $$(contentEl)], (n, o) => {
+	if (!backed && isActive.value) {
 		if (!contentEl) return;
 
 		scrollRemove = (props.pagination.reversed ? onScrollBottom : onScrollTop)(contentEl, executeQueue, TOLERANCE);
@@ -339,7 +339,7 @@ const appearFetchMoreAhead = async (): Promise<void> => {
 	fetchMoreAppearTimeout();
 };
 
-const isTop = (): boolean => isBackTop.value || (props.pagination.reversed ? isBottomVisible : isTopVisible)(contentEl!, TOLERANCE);
+const isTop = (): boolean => isActive.value && (props.pagination.reversed ? isBottomVisible : isTopVisible)(contentEl!, TOLERANCE);
 
 watch(visibility, () => {
 	if (visibility.value === 'hidden') {
@@ -431,11 +431,11 @@ const updateItem = (id: MisskeyEntity['id'], replacer: (old: MisskeyEntity) => M
 const inited = init();
 
 onActivated(() => {
-	isBackTop.value = false;
+	isActive.value = true;
 });
 
 onDeactivated(() => {
-	isBackTop.value = props.pagination.reversed ? window.scrollY >= (rootEl ? rootEl.scrollHeight - window.innerHeight : 0) : window.scrollY === 0;
+	isActive.value = false;
 });
 
 function toBottom() {
diff --git a/packages/frontend/src/nirax.ts b/packages/frontend/src/nirax.ts
index 3a03444de2..979812c0a4 100644
--- a/packages/frontend/src/nirax.ts
+++ b/packages/frontend/src/nirax.ts
@@ -1,7 +1,7 @@
 // NIRAX --- A lightweight router
 
 import { EventEmitter } from 'eventemitter3';
-import { Component, onMounted, shallowRef, ShallowRef } from 'vue';
+import { Component, nextTick, onMounted, shallowRef, ShallowRef } from 'vue';
 import { safeURIDecode } from '@/scripts/safe-uri-decode';
 
 type RouteDef = {
@@ -284,12 +284,9 @@ export function useScrollPositionManager(getScrollContainer: () => HTMLElement,
 
 		router.addListener('change', ctx => {
 			const scrollPos = scrollPosStore.get(ctx.key) ?? 0;
-			scrollContainer.scroll({ top: scrollPos, behavior: 'instant' });
-			if (scrollPos !== 0) {
-				window.setTimeout(() => { // 遷移直後はタイミングによってはコンポーネントが復元し切ってない可能性も考えられるため少し時間を空けて再度スクロール
-					scrollContainer.scroll({ top: scrollPos, behavior: 'instant' });
-				}, 100);
-			}
+			nextTick(() => {
+				scrollContainer.scroll({ top: scrollPos, behavior: 'instant' });
+			});
 		});
 
 		router.addListener('same', () => {