diff --git a/src/constants/app.ts b/src/constants/app.ts index b8aafc4f6..046893ead 100644 --- a/src/constants/app.ts +++ b/src/constants/app.ts @@ -4,6 +4,9 @@ export const GLOBAL_HEADER_MENU_ID = '__GLOBAL_HEADER_MENU__'; export const GLOBAL_SIDER_MENU_ID = '__GLOBAL_SIDER_MENU__'; +/** Wheel speed ratio for horizontal scrolling on the global tab bar. <1 slower, >1 faster */ +export const GLOBAL_TAB_WHEEL_SPEED_RATIO = 0.3; + export const themeSchemaRecord: Record = { light: 'theme.appearance.themeSchema.light', dark: 'theme.appearance.themeSchema.dark', diff --git a/src/layouts/modules/global-tab/index.vue b/src/layouts/modules/global-tab/index.vue index 5e3c92dc3..c97960512 100644 --- a/src/layouts/modules/global-tab/index.vue +++ b/src/layouts/modules/global-tab/index.vue @@ -7,6 +7,7 @@ import { useAppStore } from '@/store/modules/app'; import { useThemeStore } from '@/store/modules/theme'; import { useTabStore } from '@/store/modules/tab'; import { isPC } from '@/utils/agent'; +import { GLOBAL_TAB_WHEEL_SPEED_RATIO } from '@/constants/app'; import BetterScroll from '@/components/custom/better-scroll.vue'; import ContextMenu from './context-menu.vue'; @@ -71,6 +72,17 @@ function scrollByClientX(clientX: number) { } } +// Convert vertical wheel delta into horizontal tab scroll +function handleWheel(e: WheelEvent) { + const bs = bsScroll.value?.instance; + if (!bs) return; + // Do not intercept when there is no horizontal scroll space, keep native vertical scrolling + if (bs.maxScrollX === 0) return; + e.preventDefault(); + // deltaY > 0 (scroll down) -> tabs slide left; deltaY < 0 (scroll up) -> tabs slide right + bs.scrollBy(-e.deltaY * GLOBAL_TAB_WHEEL_SPEED_RATIO, 0, 0); +} + function getContextMenuDisabledKeys(tabId: string) { const disabledKeys: App.Global.DropdownKey[] = []; @@ -186,7 +198,7 @@ init();