From 28c540ecf7772be67e37b5d9b4101049c82c0e55 Mon Sep 17 00:00:00 2001
From: Lyan-u <46185702+Lyan-u@users.noreply.github.com>
Date: Tue, 29 Oct 2024 10:24:00 +0800
Subject: [PATCH] fix(tabs): tabs auto scroll to active tab (#1627)

---
 src/tabs/tabs.tsx | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/tabs/tabs.tsx b/src/tabs/tabs.tsx
index 9a7e249ee..5fdae8e57 100644
--- a/src/tabs/tabs.tsx
+++ b/src/tabs/tabs.tsx
@@ -119,6 +119,19 @@ export default defineComponent({
 
         lineStyle.value = style;
       }
+      if (navScroll.value) {
+        const tab = navScroll.value.querySelector<HTMLElement>(`.${activeClass}`);
+        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' });
+        }
+      }
     };
 
     onMounted(() => {