From 916d20b5a8a76bd02fb6f559134aa9dd52ffe2d4 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Fri, 15 Jul 2022 14:19:21 +0200 Subject: [PATCH] Improve element detection further (#38684) 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() } }