feat(tabs): scroll the active tab to the center position

Tencent#1648
Faxxicy · Dec 1, 2024 · 9a333fd · 9a333fd
1 parent eaaef59
commit 9a333fd
Showing 1 changed file with 2 additions and 6 deletions.
diff --git a/src/tabs/tabs.tsx b/src/tabs/tabs.tsx
@@ -124,13 +124,9 @@ export default defineComponent({
         if (!tab) return;
         const tabLeft = tab?.offsetLeft;
         const tabWidth = tab?.offsetWidth;
-        const navScrollScrollLeft = navScroll.value.scrollLeft;
         const navScrollWidth = navScroll.value.offsetWidth;
-        if (tabLeft + tabWidth - navScrollScrollLeft > navScrollWidth) {
-          navScroll.value.scrollTo({ left: tabLeft + tabWidth - navScrollWidth, behavior: 'smooth' });
-        } else if (tabLeft < navScrollScrollLeft) {
-          navScroll.value.scrollTo({ left: tabLeft, behavior: 'smooth' });
-        }
+        const scrollDistance = tabLeft - navScrollWidth / 2 + tabWidth / 2;
+        navScroll.value.scrollTo({ left: scrollDistance, behavior: 'smooth' });
       }
     };