archive/rsnext
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve element detection further (#38684)

Browse source 
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.
This commit is contained in:
Tim Neutkens 2022-07-15 14:19:21 +02:00 committed by GitHub
parent 3ebdf1988a
commit 916d20b5a8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 3 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
packages/next/client/components/layout-router.client.tsx
View file

@ -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()
}
}