diff --git a/src/renderer/components/TabBar/TabBar.tsx b/src/renderer/components/TabBar/TabBar.tsx index 752aab2..bc4470c 100644 --- a/src/renderer/components/TabBar/TabBar.tsx +++ b/src/renderer/components/TabBar/TabBar.tsx @@ -30,17 +30,35 @@ export function TabBar() { const handleWheel = (e: WheelEvent) => { // 只有当标签列表有水平滚动空间时才处理 - if (tabList.scrollWidth <= tabList.clientWidth) return + const hasHorizontalScroll = tabList.scrollWidth > tabList.clientWidth + if (!hasHorizontalScroll) return + // 阻止默认的垂直滚动 e.preventDefault() + e.stopPropagation() + // 将垂直滚动转换为水平滚动 tabList.scrollLeft += e.deltaY } - tabList.addEventListener('wheel', handleWheel, { passive: false }) - return () => tabList.removeEventListener('wheel', handleWheel) + // 使用 capture 阶段,确保事件能被捕获 + tabList.addEventListener('wheel', handleWheel, { passive: false, capture: true }) + return () => tabList.removeEventListener('wheel', handleWheel, { capture: true }) }, []) + // 自动滚动到活动标签 + useEffect(() => { + if (!tabListRef.current || !activeTabId) return + + // 使用 requestAnimationFrame 确保 DOM 已更新 + requestAnimationFrame(() => { + const activeTab = tabListRef.current?.querySelector('.tab-item.active') + if (activeTab) { + activeTab.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' }) + } + }) + }, [activeTabId]) + const handleClose = useCallback((e: React.MouseEvent, tabId: string) => { e.stopPropagation() const tab = tabs.find(t => t.id === tabId) diff --git a/src/renderer/styles/global.css b/src/renderer/styles/global.css index a28f1bf..e93768d 100644 --- a/src/renderer/styles/global.css +++ b/src/renderer/styles/global.css @@ -470,26 +470,7 @@ html, body { align-items: flex-end; padding: 0 4px; flex-shrink: 0; - overflow-x: auto; - overflow-y: hidden; -} - -/* 标签栏滚动条:默认隐藏,hover 时显示 */ -#tab-bar::-webkit-scrollbar { - height: 3px; -} - -#tab-bar::-webkit-scrollbar-thumb { - background: var(--border); - border-radius: 2px; -} - -#tab-bar::-webkit-scrollbar-thumb:hover { - background: var(--text-tertiary); -} - -#tab-bar::-webkit-scrollbar-track { - background: transparent; + /* 不设置 overflow,由 #tab-list 负责滚动 */ } #tab-list { @@ -500,9 +481,11 @@ html, body { min-width: 0; overflow-x: auto; overflow-y: hidden; + /* 平滑滚动 */ + scroll-behavior: smooth; } -/* 标签列表滚动条:默认隐藏,hover 时显示 */ +/* 标签列表滚动条 */ #tab-list::-webkit-scrollbar { height: 3px; } @@ -520,6 +503,14 @@ html, body { background: transparent; } +#tab-list::-webkit-scrollbar-thumb:hover { + background: var(--text-tertiary); +} + +#tab-list::-webkit-scrollbar-track { + background: transparent; +} + .tab-item { display: flex; align-items: center;