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
0 件のコメント

ページの最後