fix(frontend): scroll error (#112)

Co-authored-by: dumbfox <[email protected]>
MisskeyIO · Jul 24, 2023 · b6d9894 · b6d9894
1 parent ff0166f
commit b6d9894
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 13 deletions.
diff --git 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
@@ -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', () => {