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:
Julien Calixte
2026-05-04 18:15:10 +02:00
parent 55ee3bddeb
commit be006f08b4
2 changed files with 17 additions and 3 deletions

View File

@@ -40,10 +40,24 @@ export const useOverlay = (listen = true) => {
}, 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 {
x,
y,
isMobile,
scrollToNote
scrollToNote,
scrollToElement
}
}

View File

@@ -18,7 +18,7 @@ export const useRouteQueryStackedNotes = () => {
})
const { height } = useWindowSize()
const { scrollToNote, isMobile } = useOverlay(false)
const { scrollToNote, scrollToElement, isMobile } = useOverlay(false)
const scrollToHashInNote = (
cleanSha: string,
@@ -57,7 +57,7 @@ export const useRouteQueryStackedNotes = () => {
) as HTMLElement | null
if (element) {
scrollToNote((index + 1) * element.clientHeight)
scrollToElement(element)
return
}