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)
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user