Compare commits

...

2 Commits

Author SHA1 Message Date
Julien Calixte
be006f08b4 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.
2026-05-04 18:15:10 +02:00
Julien Calixte
55ee3bddeb fix(router): skip view transition on query-only navigation
The root fade overlapped smooth scrolls triggered when stackedNotes
mutated, making the scroll appear to start from the snapshot's frame
instead of the user's actual position.
2026-05-04 18:15:04 +02:00
3 changed files with 19 additions and 4 deletions

View File

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

View File

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

View File

@@ -95,8 +95,9 @@ export const router = createRouter({
routes routes
}) })
router.beforeEach(() => { router.beforeEach((to, from) => {
if (!("startViewTransition" in document)) return if (!("startViewTransition" in document)) return
if (to.path === from.path) return
return new Promise<void>((resolve) => { return new Promise<void>((resolve) => {
;( ;(
document as Document & { document as Document & {