Snapshotの応用、infinite loadingしたページをhistory.back()する際に、元の位置に戻れなくなってしまう問題の解決方法
以下はSSRの場合の解決方法の例です。
dataは+page.server.tsから共有されるものでタイプはpageData、どうやらフロントエンドで追加したデータは自動的には保存されないので(もう一回ロード処理してるだけかもし、中身はどう動いてるかは正直わからない)、dataを保存しないと最初にロードした最後のところまでにしか戻れない。
await tick();はDOMの更新を待つための非同期処理、それが終わる前に保存したyに戻ろうとするとずれてしまいます。
export const snapshot: Snapshot = {
capture: () => {
return { data, scrollPosition: window.scrollY };
},
restore: async (value) => {
data = value.data;
await tick();
window.scroll(0, value.scrollPosition);
}
};
また、公式の例は以下通り
https://github.com/Rich-Harris/sveltesnaps/blob/main/src/lib/components/Scroller.svelte#L6C1-L27C3
https://github.com/Rich-Harris/sveltesnaps/blob/main/src/routes/%2Bpage.svelte#L15C1-L30C4
1
0
件のコメント
ページの最後