From 31e7fc391ea904d83002c427026807d595f404e8 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] Revert "fix(frontend): scroll error (#112)" This reverts commit b6d9894ed931249b3105cfbd071915b6652380da. --- packages/frontend/src/components/MkPagination.vue | 12 ++++++------ packages/frontend/src/nirax.ts | 11 +++++++---- 2 files changed, 13 insertions(+), 10 deletions(-) diff --git a/packages/frontend/src/components/MkPagination.vue b/packages/frontend/src/components/MkPagination.vue index 989313b182..661b04c365 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(null); -const isActive = ref(false); +const isBackTop = ref(false); const empty = computed(() => items.value.size === 0); const error = ref(false); const { @@ -167,8 +167,8 @@ watch($$(rootEl), () => { }); }); -watch([$$(backed), $$(contentEl)], (n, o) => { - if (!backed && isActive.value) { +watch([$$(backed), $$(contentEl)], () => { + if (!backed) { if (!contentEl) return; scrollRemove = (props.pagination.reversed ? onScrollBottom : onScrollTop)(contentEl, executeQueue, TOLERANCE); @@ -339,7 +339,7 @@ const appearFetchMoreAhead = async (): Promise => { fetchMoreAppearTimeout(); }; -const isTop = (): boolean => isActive.value && (props.pagination.reversed ? isBottomVisible : isTopVisible)(contentEl!, TOLERANCE); +const isTop = (): boolean => isBackTop.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(() => { - isActive.value = true; + isBackTop.value = false; }); onDeactivated(() => { - isActive.value = false; + isBackTop.value = props.pagination.reversed ? window.scrollY >= (rootEl ? rootEl.scrollHeight - window.innerHeight : 0) : window.scrollY === 0; }); function toBottom() { diff --git a/packages/frontend/src/nirax.ts b/packages/frontend/src/nirax.ts index 979812c0a4..3a03444de2 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, nextTick, onMounted, shallowRef, ShallowRef } from 'vue'; +import { Component, onMounted, shallowRef, ShallowRef } from 'vue'; import { safeURIDecode } from '@/scripts/safe-uri-decode'; type RouteDef = { @@ -284,9 +284,12 @@ export function useScrollPositionManager(getScrollContainer: () => HTMLElement, router.addListener('change', ctx => { const scrollPos = scrollPosStore.get(ctx.key) ?? 0; - nextTick(() => { - scrollContainer.scroll({ top: scrollPos, behavior: 'instant' }); - }); + scrollContainer.scroll({ top: scrollPos, behavior: 'instant' }); + if (scrollPos !== 0) { + window.setTimeout(() => { // 遷移直後はタイミングによってはコンポーネントが復元し切ってない可能性も考えられるため少し時間を空けて再度スクロール + scrollContainer.scroll({ top: scrollPos, behavior: 'instant' }); + }, 100); + } }); router.addListener('same', () => {