diff --git a/src/renderer/components/TabBar/TabBar.tsx b/src/renderer/components/TabBar/TabBar.tsx index bc4470c..5a6eebc 100644 --- a/src/renderer/components/TabBar/TabBar.tsx +++ b/src/renderer/components/TabBar/TabBar.tsx @@ -20,15 +20,19 @@ export function TabBar() { const closeAllTabs = useTabStore(s => s.closeAllTabs) const closeTabsToRight = useTabStore(s => s.closeTabsToRight) + const tabBarRef = useRef(null) const tabListRef = useRef(null) const [menu, setMenu] = useState({ visible: false, x: 0, y: 0, tabId: '' }) // 支持鼠标滚轮水平滚动标签栏 useEffect(() => { - const tabList = tabListRef.current - if (!tabList) return + const tabBar = tabBarRef.current + if (!tabBar) return const handleWheel = (e: WheelEvent) => { + const tabList = tabListRef.current + if (!tabList) return + // 只有当标签列表有水平滚动空间时才处理 const hasHorizontalScroll = tabList.scrollWidth > tabList.clientWidth if (!hasHorizontalScroll) return @@ -37,13 +41,16 @@ export function TabBar() { e.preventDefault() e.stopPropagation() - // 将垂直滚动转换为水平滚动 - tabList.scrollLeft += e.deltaY + // 计算滚动量:优先使用 deltaX(触控板左右滑动),否则用 deltaY(鼠标滚轮) + const scrollAmount = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY + + // 应用滚动 + tabList.scrollLeft += scrollAmount } - // 使用 capture 阶段,确保事件能被捕获 - tabList.addEventListener('wheel', handleWheel, { passive: false, capture: true }) - return () => tabList.removeEventListener('wheel', handleWheel, { capture: true }) + // 绑定到 #tab-bar 上,确保能捕获所有滚轮事件 + tabBar.addEventListener('wheel', handleWheel, { passive: false }) + return () => tabBar.removeEventListener('wheel', handleWheel) }, []) // 自动滚动到活动标签 @@ -137,7 +144,7 @@ export function TabBar() { if (tabs.length === 0) return null return ( -
+
{tabs.map(tab => (