sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(frontend): ページ遷移でスクロール位置が保持されない問題を修正

Browse Source 
Fix #11068
This commit is contained in:
syuilo
2023-07-08 15:30:36 +09:00
parent 644023316e
commit 15683370f0
6 changed files with 53 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
packages/frontend/src/router.ts
View File

@@ -509,41 +509,12 @@ export const mainRouter = new Router(routes, location.pathname + location.search
window.history.replaceState({ key: mainRouter.getCurrentKey() }, '', location.href);
// TODO: このファイルでスクロール位置も管理する設計だとdeckに対応できないのでなんとかする
// スクロール位置取得+スクロール位置設定関数をprovideする感じでも良いかも
const scrollPosStore = new Map<string, number>();
window.setInterval(() => {
scrollPosStore.set(window.history.state?.key, window.scrollY);
}, 1000);
mainRouter.addListener('push', ctx => {
window.history.pushState({ key: ctx.key }, '', ctx.path);
const scrollPos = scrollPosStore.get(ctx.key) ?? 0;
window.scroll({ top: scrollPos, behavior: 'instant' });
if (scrollPos !== 0) {
window.setTimeout(() => { // 遷移直後はタイミングによってはコンポーネントが復元し切ってない可能性も考えられるため少し時間を空けて再度スクロール
window.scroll({ top: scrollPos, behavior: 'instant' });
}, 100);
}
});
mainRouter.addListener('replace', ctx => {
window.history.replaceState({ key: ctx.key }, '', ctx.path);
});
mainRouter.addListener('same', () => {
window.scroll({ top: 0, behavior: 'smooth' });
});
window.addEventListener('popstate', (event) => {
mainRouter.replace(location.pathname + location.search + location.hash, event.state?.key, false);
const scrollPos = scrollPosStore.get(event.state?.key) ?? 0;
window.scroll({ top: scrollPos, behavior: 'instant' });
window.setTimeout(() => { // 遷移直後はタイミングによってはコンポーネントが復元し切ってない可能性も考えられるため少し時間を空けて再度スクロール
window.scroll({ top: scrollPos, behavior: 'instant' });
}, 100);
mainRouter.replace(location.pathname + location.search + location.hash, event.state?.key);
});
export function useRouter(): Router {