fix: 标签栏滚轮滚动改为绑定到 #tab-bar
- wheel 事件从 #tab-list 移到 #tab-bar 上绑定 - 同时支持触控板左右滑动 (deltaX) 和鼠标滚轮上下滚动 (deltaY) - 智能选择滚动量:比较 deltaX 和 deltaY 的绝对值取较大者
This commit is contained in:
@@ -20,15 +20,19 @@ export function TabBar() {
|
|||||||
const closeAllTabs = useTabStore(s => s.closeAllTabs)
|
const closeAllTabs = useTabStore(s => s.closeAllTabs)
|
||||||
const closeTabsToRight = useTabStore(s => s.closeTabsToRight)
|
const closeTabsToRight = useTabStore(s => s.closeTabsToRight)
|
||||||
|
|
||||||
|
const tabBarRef = useRef<HTMLDivElement>(null)
|
||||||
const tabListRef = useRef<HTMLDivElement>(null)
|
const tabListRef = useRef<HTMLDivElement>(null)
|
||||||
const [menu, setMenu] = useState<ContextMenuState>({ visible: false, x: 0, y: 0, tabId: '' })
|
const [menu, setMenu] = useState<ContextMenuState>({ visible: false, x: 0, y: 0, tabId: '' })
|
||||||
|
|
||||||
// 支持鼠标滚轮水平滚动标签栏
|
// 支持鼠标滚轮水平滚动标签栏
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
const tabBar = tabBarRef.current
|
||||||
|
if (!tabBar) return
|
||||||
|
|
||||||
|
const handleWheel = (e: WheelEvent) => {
|
||||||
const tabList = tabListRef.current
|
const tabList = tabListRef.current
|
||||||
if (!tabList) return
|
if (!tabList) return
|
||||||
|
|
||||||
const handleWheel = (e: WheelEvent) => {
|
|
||||||
// 只有当标签列表有水平滚动空间时才处理
|
// 只有当标签列表有水平滚动空间时才处理
|
||||||
const hasHorizontalScroll = tabList.scrollWidth > tabList.clientWidth
|
const hasHorizontalScroll = tabList.scrollWidth > tabList.clientWidth
|
||||||
if (!hasHorizontalScroll) return
|
if (!hasHorizontalScroll) return
|
||||||
@@ -37,13 +41,16 @@ export function TabBar() {
|
|||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
e.stopPropagation()
|
e.stopPropagation()
|
||||||
|
|
||||||
// 将垂直滚动转换为水平滚动
|
// 计算滚动量:优先使用 deltaX(触控板左右滑动),否则用 deltaY(鼠标滚轮)
|
||||||
tabList.scrollLeft += e.deltaY
|
const scrollAmount = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY
|
||||||
|
|
||||||
|
// 应用滚动
|
||||||
|
tabList.scrollLeft += scrollAmount
|
||||||
}
|
}
|
||||||
|
|
||||||
// 使用 capture 阶段,确保事件能被捕获
|
// 绑定到 #tab-bar 上,确保能捕获所有滚轮事件
|
||||||
tabList.addEventListener('wheel', handleWheel, { passive: false, capture: true })
|
tabBar.addEventListener('wheel', handleWheel, { passive: false })
|
||||||
return () => tabList.removeEventListener('wheel', handleWheel, { capture: true })
|
return () => tabBar.removeEventListener('wheel', handleWheel)
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
// 自动滚动到活动标签
|
// 自动滚动到活动标签
|
||||||
@@ -137,7 +144,7 @@ export function TabBar() {
|
|||||||
if (tabs.length === 0) return null
|
if (tabs.length === 0) return null
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div id="tab-bar">
|
<div id="tab-bar" ref={tabBarRef}>
|
||||||
<div id="tab-list" ref={tabListRef}>
|
<div id="tab-list" ref={tabListRef}>
|
||||||
{tabs.map(tab => (
|
{tabs.map(tab => (
|
||||||
<div
|
<div
|
||||||
|
|||||||
Reference in New Issue
Block a user