chore(debug): add temporary scroll overlay for mobile diagnosis

This commit is contained in:
Julien Calixte
2026-05-04 19:02:35 +02:00
parent 550b3cf019
commit c88340d5f1
2 changed files with 46 additions and 1 deletions

View File

@@ -13,6 +13,7 @@ const { isATProtoReady } = useATProtoLogin()
<new-version />
</div>
<pre id="scroll-debug"></pre>
</template>
<style lang="scss">
@@ -45,4 +46,23 @@ const { isATProtoReady } = useATProtoLogin()
::view-transition-new(remanso-logo) {
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>

View File

@@ -42,7 +42,32 @@ export const useOverlay = (listen = true) => {
const scrollToElement = (element: HTMLElement) => {
requestAnimationFrame(() => {
const mainApp = document.getElementById("main-app")
const debug = document.getElementById("scroll-debug")
if (debug && mainApp) {
const er = element.getBoundingClientRect()
const cr = mainApp.getBoundingClientRect()
const lines = [
`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" })
requestAnimationFrame(() => {
debug.textContent += `\nafter1f scrollTop: ${mainApp.scrollTop}`
setTimeout(() => {
debug.textContent += `\nafter500ms scrollTop: ${mainApp.scrollTop}`
}, 500)
})
} else {
element.scrollIntoView({ behavior: "smooth", block: "start" })
}
})
}