From a1b06e827315cd7c412cf2e49eedd032233bf65c Mon Sep 17 00:00:00 2001
From: Tim Neutkens <tim@timneutkens.nl>
Date: Fri, 15 Jul 2022 13:31:12 +0200
Subject: [PATCH] Refine scrolling into view in new router

---
 .../client/components/layout-router.client.tsx   | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/next/client/components/layout-router.client.tsx b/packages/next/client/components/layout-router.client.tsx
index ca1de4594d5a..2c994a6fe020 100644
--- a/packages/next/client/components/layout-router.client.tsx
+++ b/packages/next/client/components/layout-router.client.tsx
@@ -42,6 +42,17 @@ function createInfinitePromise() {
   return infinitePromise
 }
 
+function isInViewport(element: HTMLElement) {
+  const rect = element.getBoundingClientRect()
+  return (
+    rect.top >= 0 &&
+    rect.left >= 0 &&
+    rect.bottom <=
+      (window.innerHeight || document.documentElement.clientHeight) &&
+    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+  )
+}
+
 export function InnerLayoutRouter({
   parallelRouterKey,
   url,
@@ -72,7 +83,10 @@ export function InnerLayoutRouter({
     if (focusRef.focus && focusAndScrollRef.current) {
       focusRef.focus = false
       focusAndScrollRef.current.focus()
-      focusAndScrollRef.current.scrollIntoView()
+      // Only scroll into viewport when the layout is not visible currently.
+      if (!isInViewport(focusAndScrollRef.current)) {
+        focusAndScrollRef.current.scrollIntoView()
+      }
     }
   }, [focusRef])