refactor(scroll): clean up debug overlay and pass anchor by param
Removes the temporary on-screen scroll diagnosis panel and the global window.__scrollAtClick stash. The anchor scrollTop is now captured synchronously at addStackedNote entry and threaded through scrollToFocusedNote and scrollToNoteElement to scrollToElement, so no state survives across calls — nothing to reset on repo or page change.
This commit is contained in:
20
src/App.vue
20
src/App.vue
@@ -13,7 +13,6 @@ const { isATProtoReady } = useATProtoLogin()
|
|||||||
|
|
||||||
<new-version />
|
<new-version />
|
||||||
</div>
|
</div>
|
||||||
<pre id="scroll-debug"></pre>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@@ -46,23 +45,4 @@ const { isATProtoReady } = useATProtoLogin()
|
|||||||
::view-transition-new(remanso-logo) {
|
::view-transition-new(remanso-logo) {
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
}
|
}
|
||||||
|
|
||||||
#scroll-debug {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 9999;
|
|
||||||
margin: 0;
|
|
||||||
padding: 4px 6px;
|
|
||||||
background: rgba(0, 0, 0, 0.75);
|
|
||||||
color: #fff;
|
|
||||||
font: 10px/1.3 ui-monospace, monospace;
|
|
||||||
white-space: pre;
|
|
||||||
pointer-events: none;
|
|
||||||
max-width: 100vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
#scroll-debug:empty {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -40,42 +40,14 @@ export const useOverlay = (listen = true) => {
|
|||||||
}, 80)
|
}, 80)
|
||||||
}
|
}
|
||||||
|
|
||||||
const scrollToElement = (element: HTMLElement) => {
|
const scrollToElement = (element: HTMLElement, anchorTop?: number) => {
|
||||||
const mainApp = document.getElementById("main-app")
|
const mainApp = document.getElementById("main-app")
|
||||||
const clickTop = (window as unknown as { __scrollAtClick?: number })
|
if (mainApp && anchorTop !== undefined) {
|
||||||
.__scrollAtClick
|
mainApp.scrollTop = anchorTop
|
||||||
|
|
||||||
if (mainApp && clickTop !== undefined) {
|
|
||||||
mainApp.scrollTop = clickTop
|
|
||||||
}
|
}
|
||||||
|
|
||||||
requestAnimationFrame(() => {
|
requestAnimationFrame(() => {
|
||||||
const debug = document.getElementById("scroll-debug")
|
|
||||||
if (debug && mainApp) {
|
|
||||||
const er = element.getBoundingClientRect()
|
|
||||||
const cr = mainApp.getBoundingClientRect()
|
|
||||||
const lines = [
|
|
||||||
`clickTop: ${clickTop ?? "n/a"}`,
|
|
||||||
`before scrollTop: ${mainApp.scrollTop}`,
|
|
||||||
`mainApp scrollH: ${mainApp.scrollHeight} clientH: ${mainApp.clientHeight}`,
|
|
||||||
`body scrollY: ${window.scrollY} innerH: ${window.innerHeight}`,
|
|
||||||
`el.rect.top: ${er.top.toFixed(1)}`,
|
|
||||||
`mainApp.rect.top: ${cr.top.toFixed(1)}`,
|
|
||||||
`target: ${(er.top - cr.top + mainApp.scrollTop).toFixed(1)}`
|
|
||||||
]
|
|
||||||
debug.textContent = lines.join("\n")
|
|
||||||
|
|
||||||
element.scrollIntoView({ behavior: "smooth", block: "start" })
|
element.scrollIntoView({ behavior: "smooth", block: "start" })
|
||||||
|
|
||||||
requestAnimationFrame(() => {
|
|
||||||
debug.textContent += `\nafter1f scrollTop: ${mainApp.scrollTop}`
|
|
||||||
setTimeout(() => {
|
|
||||||
debug.textContent += `\nafter500ms scrollTop: ${mainApp.scrollTop}`
|
|
||||||
}, 500)
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
element.scrollIntoView({ behavior: "smooth", block: "start" })
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -50,6 +50,7 @@ export const useRouteQueryStackedNotes = () => {
|
|||||||
const scrollToNoteElement = (
|
const scrollToNoteElement = (
|
||||||
cleanNoteId: string,
|
cleanNoteId: string,
|
||||||
index: number,
|
index: number,
|
||||||
|
anchorTop?: number,
|
||||||
attempts = 30
|
attempts = 30
|
||||||
) => {
|
) => {
|
||||||
const element = document.querySelector(
|
const element = document.querySelector(
|
||||||
@@ -57,7 +58,7 @@ export const useRouteQueryStackedNotes = () => {
|
|||||||
) as HTMLElement | null
|
) as HTMLElement | null
|
||||||
|
|
||||||
if (element) {
|
if (element) {
|
||||||
scrollToElement(element)
|
scrollToElement(element, anchorTop)
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -67,7 +68,7 @@ export const useRouteQueryStackedNotes = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
requestAnimationFrame(() => {
|
requestAnimationFrame(() => {
|
||||||
scrollToNoteElement(cleanNoteId, index, attempts - 1)
|
scrollToNoteElement(cleanNoteId, index, anchorTop, attempts - 1)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -76,20 +77,22 @@ export const useRouteQueryStackedNotes = () => {
|
|||||||
notes?: string[]
|
notes?: string[]
|
||||||
hash?: string
|
hash?: string
|
||||||
smoothHash?: boolean
|
smoothHash?: boolean
|
||||||
|
anchorTop?: number
|
||||||
}
|
}
|
||||||
|
|
||||||
const scrollToFocusedNote = ({
|
const scrollToFocusedNote = ({
|
||||||
noteId = null,
|
noteId = null,
|
||||||
notes = stackedNotes.value,
|
notes = stackedNotes.value,
|
||||||
hash,
|
hash,
|
||||||
smoothHash = false
|
smoothHash = false,
|
||||||
|
anchorTop
|
||||||
}: ScrollToFocusedNoteOptions = {}) => {
|
}: ScrollToFocusedNoteOptions = {}) => {
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
const index = noteId ? notes.findIndex((nid) => nid === noteId) : 0
|
const index = noteId ? notes.findIndex((nid) => nid === noteId) : 0
|
||||||
|
|
||||||
if (isMobile.value) {
|
if (isMobile.value) {
|
||||||
if (noteId) {
|
if (noteId) {
|
||||||
scrollToNoteElement(noteId.replaceAll(":", "-"), index)
|
scrollToNoteElement(noteId.replaceAll(":", "-"), index, anchorTop)
|
||||||
} else {
|
} else {
|
||||||
scrollToNote(0)
|
scrollToNote(0)
|
||||||
}
|
}
|
||||||
@@ -114,15 +117,15 @@ export const useRouteQueryStackedNotes = () => {
|
|||||||
selector?: string,
|
selector?: string,
|
||||||
hash?: string
|
hash?: string
|
||||||
) => {
|
) => {
|
||||||
const mainAppEl = document.getElementById("main-app")
|
const anchorTop =
|
||||||
;(window as unknown as { __scrollAtClick?: number }).__scrollAtClick =
|
document.getElementById("main-app")?.scrollTop ?? undefined
|
||||||
mainAppEl?.scrollTop ?? 0
|
|
||||||
|
|
||||||
if (stackedNotes.value.includes(sha)) {
|
if (stackedNotes.value.includes(sha)) {
|
||||||
scrollToFocusedNote({
|
scrollToFocusedNote({
|
||||||
noteId: selector ?? sha,
|
noteId: selector ?? sha,
|
||||||
hash,
|
hash,
|
||||||
smoothHash: true
|
smoothHash: true,
|
||||||
|
anchorTop
|
||||||
})
|
})
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
@@ -143,7 +146,7 @@ export const useRouteQueryStackedNotes = () => {
|
|||||||
stackedNotes.value = newStackedNotes
|
stackedNotes.value = newStackedNotes
|
||||||
}
|
}
|
||||||
|
|
||||||
scrollToFocusedNote({ noteId: selector ?? sha, hash })
|
scrollToFocusedNote({ noteId: selector ?? sha, hash, anchorTop })
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
|||||||
Reference in New Issue
Block a user