fix(stacked-note): align mobile scroll target to element rect
Replace the (index + 1) * clientHeight math and 80ms setTimeout with a scrollToElement helper that reads getBoundingClientRect inside rAF, so the smooth scroll starts from the user's actual position even when the note is freshly mounted.
This commit is contained in:
@@ -40,10 +40,24 @@ export const useOverlay = (listen = true) => {
|
|||||||
}, 80)
|
}, 80)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const scrollToElement = (element: HTMLElement) => {
|
||||||
|
const mainApp = document.getElementById("main-app")
|
||||||
|
if (!mainApp) return
|
||||||
|
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
const top =
|
||||||
|
element.getBoundingClientRect().top -
|
||||||
|
mainApp.getBoundingClientRect().top +
|
||||||
|
mainApp.scrollTop
|
||||||
|
mainApp.scrollTo({ top, behavior: "smooth" })
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
x,
|
x,
|
||||||
y,
|
y,
|
||||||
isMobile,
|
isMobile,
|
||||||
scrollToNote
|
scrollToNote,
|
||||||
|
scrollToElement
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -18,7 +18,7 @@ export const useRouteQueryStackedNotes = () => {
|
|||||||
})
|
})
|
||||||
const { height } = useWindowSize()
|
const { height } = useWindowSize()
|
||||||
|
|
||||||
const { scrollToNote, isMobile } = useOverlay(false)
|
const { scrollToNote, scrollToElement, isMobile } = useOverlay(false)
|
||||||
|
|
||||||
const scrollToHashInNote = (
|
const scrollToHashInNote = (
|
||||||
cleanSha: string,
|
cleanSha: string,
|
||||||
@@ -57,7 +57,7 @@ export const useRouteQueryStackedNotes = () => {
|
|||||||
) as HTMLElement | null
|
) as HTMLElement | null
|
||||||
|
|
||||||
if (element) {
|
if (element) {
|
||||||
scrollToNote((index + 1) * element.clientHeight)
|
scrollToElement(element)
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user