From c30ad6884b5b451ebcc3d6b9a6a33518e7fd13e3 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Fri, 15 Jul 2022 14:18:48 +0200 Subject: [PATCH] Improve element detection further Follow-up to #38682. Instead of checking if the full element is in the viewport we only check if the top of the element is in the viewport. If it is not we have to scroll back up in cases of navigating between items in the same layout for example. --- .../next/client/components/layout-router.client.tsx | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/packages/next/client/components/layout-router.client.tsx b/packages/next/client/components/layout-router.client.tsx index 2c994a6fe020..3a3cc6ed1495 100644 --- a/packages/next/client/components/layout-router.client.tsx +++ b/packages/next/client/components/layout-router.client.tsx @@ -42,15 +42,9 @@ function createInfinitePromise() { return infinitePromise } -function isInViewport(element: HTMLElement) { +function topOfElementInViewport(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) - ) + return rect.top >= 0 } export function InnerLayoutRouter({ @@ -84,7 +78,7 @@ export function InnerLayoutRouter({ focusRef.focus = false focusAndScrollRef.current.focus() // Only scroll into viewport when the layout is not visible currently. - if (!isInViewport(focusAndScrollRef.current)) { + if (!topOfElementInViewport(focusAndScrollRef.current)) { focusAndScrollRef.current.scrollIntoView() } }