resolve nuxt#16, remember scroll position when go back

ali4zimi · Jun 7, 2023 · af43b70 · af43b70
1 parent 3786925
commit af43b70
Showing 1 changed file with 34 additions and 2 deletions.
diff --git a/plugins/scroll.client.ts b/plugins/scroll.client.ts
@@ -2,7 +2,39 @@
 export default defineNuxtPlugin(() => {
   const nuxtApp = useNuxtApp()
 
-  nuxtApp.$router.afterEach(async () => {
-    document.querySelector('[data-scroll]')?.scrollTo({ top: 9 })
+
+  // We need to check if the user is going back or not
+  let isBack = false;
+  window.onpopstate = function () {
+    isBack = true;
+  };
+
+  nuxtApp.$router.afterEach(async (to, from) => {
+    if (from.path === to.path) return;
+
+    const currentHistory = {
+      path: from.path,
+      scrollPosition: document.querySelector('[data-scroll]')?.scrollTop
+    }
+
+    const scrollHistory = JSON.parse(localStorage.getItem('scrollHistory') || '[]');
+
+    if (scrollHistory[scrollHistory.length - 1]?.path === to.path && isBack) {
+      // Here we check if the scroll is not biger than the scrollHeight, if it is, scroll to the bottom
+      if (scrollHistory[scrollHistory.length - 1]?.scrollPosition > document.querySelector('[data-scroll]')?.scrollHeight) {
+        document.querySelector('[data-scroll]')?.scrollTo({ top: document.querySelector('[data-scroll]')?.scrollHeight });
+      } else {
+        document.querySelector('[data-scroll]')?.scrollTo({ top: scrollHistory[scrollHistory.length - 1]?.scrollPosition })
+      }
+
+      scrollHistory.pop();
+    }
+    else {
+      scrollHistory.push(currentHistory);
+      document.querySelector('[data-scroll]')?.scrollTo({ top: 9 });
+      isBack = false;
+    }
+
+    localStorage.setItem('scrollHistory', JSON.stringify(scrollHistory));
   })
 })