fix(app): file tabs - auto scroll on open & scroll via mouse wheel (#11070)

This commit is contained in:
Alex Yaroshuk
2026-01-29 09:45:12 +08:00
committed by GitHub
parent 7ad165fbdc
commit 0c8de47f7d

View File

@@ -2183,7 +2183,62 @@ export default function Page() {
<ConstrainDragYAxis />
<Tabs value={activeTab()} onChange={openTab}>
<div class="sticky top-0 shrink-0 flex">
<Tabs.List>
<Tabs.List
ref={(el) => {
let scrollTimeout: number | undefined
let prevScrollWidth = el.scrollWidth
let prevContextOpen = contextOpen()
const handler = () => {
if (scrollTimeout !== undefined) clearTimeout(scrollTimeout)
scrollTimeout = window.setTimeout(() => {
const scrollWidth = el.scrollWidth
const clientWidth = el.clientWidth
const currentContextOpen = contextOpen()
// Only scroll when a tab is added (width increased), not on removal
if (scrollWidth > prevScrollWidth) {
if (!prevContextOpen && currentContextOpen) {
// Context tab was opened, scroll to first
el.scrollTo({
left: 0,
behavior: "smooth",
})
} else if (scrollWidth > clientWidth) {
// File tab was added, scroll to rightmost
el.scrollTo({
left: scrollWidth - clientWidth,
behavior: "smooth",
})
}
}
// When width decreases (tab removed), don't scroll - let browser handle it naturally
prevScrollWidth = scrollWidth
prevContextOpen = currentContextOpen
}, 0)
}
const wheelHandler = (e: WheelEvent) => {
// Enable horizontal scrolling with mouse wheel
if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
el.scrollLeft += e.deltaY > 0 ? 50 : -50
e.preventDefault()
}
}
el.addEventListener("wheel", wheelHandler, { passive: false })
const observer = new MutationObserver(handler)
observer.observe(el, { childList: true })
onCleanup(() => {
el.removeEventListener("wheel", wheelHandler)
observer.disconnect()
if (scrollTimeout !== undefined) clearTimeout(scrollTimeout)
})
}}
>
<Show when={contextOpen()}>
<Tabs.Trigger
value="context"