Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

fix(frontend): scroll error (#112)

Browse source 
Co-authored-by: dumbfox <benkang666@gmail.com>
This commit is contained in:
まっちゃとーにゅ 2023-07-25 02:35:38 +09:00 committed by GitHub
parent ff0166fe71
commit b6d9894ed9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
packages/frontend/src/components/MkPagination.vue
View file

@ -128,7 +128,7 @@ const moreFetching = ref(false);
const more = ref(false); const more = ref(false);
const preventAppearFetchMore = ref(false); const preventAppearFetchMore = ref(false);
const preventAppearFetchMoreTimer = ref<number | null>(null); const preventAppearFetchMoreTimer = ref<number | null>(null);
const isBackTop = ref(false); const isActive = ref(false);
const empty = computed(() => items.value.size === 0); const empty = computed(() => items.value.size === 0);
const error = ref(false); const error = ref(false);
const { const {
@ -167,8 +167,8 @@ watch($$(rootEl), () => {
}); });
}); });
watch([$$(backed), $$(contentEl)], () => { watch([$$(backed), $$(contentEl)], (n, o) => {
if (!backed) { if (!backed && isActive.value) {
if (!contentEl) return; if (!contentEl) return;
scrollRemove = (props.pagination.reversed ? onScrollBottom : onScrollTop)(contentEl, executeQueue, TOLERANCE); scrollRemove = (props.pagination.reversed ? onScrollBottom : onScrollTop)(contentEl, executeQueue, TOLERANCE);
@ -339,7 +339,7 @@ const appearFetchMoreAhead = async (): Promise<void> => {
fetchMoreAppearTimeout(); 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, () => { watch(visibility, () => {
if (visibility.value === 'hidden') { if (visibility.value === 'hidden') {
@ -431,11 +431,11 @@ const updateItem = (id: MisskeyEntity['id'], replacer: (old: MisskeyEntity) => M
const inited = init(); const inited = init();
onActivated(() => { onActivated(() => {
isBackTop.value = false; isActive.value = true;
}); });
onDeactivated(() => { onDeactivated(() => {
isBackTop.value = props.pagination.reversed ? window.scrollY >= (rootEl ? rootEl.scrollHeight - window.innerHeight : 0) : window.scrollY === 0; isActive.value = false;
}); });
function toBottom() { function toBottom() {

9
packages/frontend/src/nirax.ts
View file

@ -1,7 +1,7 @@
// NIRAX --- A lightweight router // NIRAX --- A lightweight router
import { EventEmitter } from 'eventemitter3'; 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'; import { safeURIDecode } from '@/scripts/safe-uri-decode';
type RouteDef = { type RouteDef = {
@ -284,12 +284,9 @@ export function useScrollPositionManager(getScrollContainer: () => HTMLElement,
router.addListener('change', ctx => { router.addListener('change', ctx => {
const scrollPos = scrollPosStore.get(ctx.key) ?? 0; 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', () => { router.addListener('same', () => {