Fix smooth scroll on history pop

tinloof · Oct 16, 2024 · f4f47b1 · f4f47b1
1 parent 5d4d3ad
commit f4f47b1
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 1 deletion.
diff --git a/storefront/app/(website)/layout.tsx b/storefront/app/(website)/layout.tsx
@@ -4,13 +4,14 @@ import {ExitPreview} from "@/components/exit-preview";
 import CookieBanner from "@/components/global/cookie-banner";
 import Footer from "@/components/global/footer";
 import Header from "@/components/global/header";
+import PreventBackNavigationSmoothScroll from "@/components/prevent-back-navigation-smooth-scroll";
 import {TailwindIndicator} from "@/components/tailwind-indicator";
 import config from "@/config";
 import {loadGlobalData} from "@/data/sanity";
 import {getOgImages} from "@/data/sanity/resolve-sanity-route-metadata";
+import {VisualEditing} from "next-sanity";
 import {revalidatePath, revalidateTag} from "next/cache";
 import {draftMode} from "next/headers";
-import {VisualEditing} from "next-sanity";
 import React from "react";
 
 export async function generateMetadata(): Promise<Metadata> {
@@ -34,6 +35,7 @@ export default async function Layout({children}: {children: React.ReactNode}) {
 
   return (
     <body className="relative flex min-h-screen min-w-min-screen flex-col overflow-x-clip">
+      <PreventBackNavigationSmoothScroll />
       {data.header && <Header {...data.header} />}
       <main className="flex-1">{children}</main>
       {data.footer && <Footer {...data.footer} />}

diff --git a/storefront/components/prevent-back-navigation-smooth-scroll.ts b/storefront/components/prevent-back-navigation-smooth-scroll.ts
@@ -0,0 +1,19 @@
+"use client";
+
+import {useEffect} from "react";
+
+export default function PreventBackNavigationSmoothScroll() {
+  useEffect(() => {
+    window.addEventListener("popstate", () => {
+      // Disable smooth scroll
+      document.documentElement.style.scrollBehavior = "auto";
+
+      // Re-enable smooth scroll after a short delay
+      setTimeout(() => {
+        document.documentElement.style.scrollBehavior = "smooth";
+      }, 100);
+    });
+  }, []);
+
+  return null;
+}