From f9695bbeae4358a983f46f876c3ab5fa74be82b0 Mon Sep 17 00:00:00 2001
From: zhangyuanpeng <1016062422@qq.com>
Date: Tue, 6 May 2025 17:27:00 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20:bug:=20=E6=A0=87=E7=AD=BE=E6=A0=8F?=
 =?UTF-8?q?=E6=B0=B4=E5=B9=B3=E6=BB=9A=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

水平滚动样式恢复及鼠标滚轮水平滚动
---
 src/layout/components/TagsView/index.vue | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
index 1966873e..d020958e 100644
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="tags-container">
     <!-- 水平滚动容器 -->
-    <el-scrollbar class="scroll-container" :vertical="false" @wheel="handleScroll">
+    <el-scrollbar ref="scrollbarRef" class="scroll-container" @wheel="handleScroll">
       <router-link
         v-for="tag in visitedViews"
         ref="tagRef"
@@ -344,8 +344,16 @@ function closeContentMenu() {
 /**
  * 处理鼠标滚轮事件，实现水平滚动
  */
-function handleScroll() {
+const scrollbarRef = ref();
+function handleScroll(event: any) {
   closeContentMenu();
+  // 检查是否有横向滚动条
+  if (scrollbarRef.value.wrapRef.scrollWidth > scrollbarRef.value.wrapRef.clientWidth) {
+    const wheelDelta = event.wheelDelta || 0; // 向上滚动时为120，向下滚动时为-120
+    const scrollLeft = scrollbarRef.value.wrapRef.scrollLeft; // 当前滚动条到左边的距离
+    // 设置滚动条到左边的距离
+    scrollbarRef.value.setScrollLeft(scrollLeft - wheelDelta);
+  }
 }
 
 /**
@@ -421,6 +429,11 @@ onMounted(() => {
   border: 1px solid var(--el-border-color-light);
   box-shadow: 0 1px 1px var(--el-box-shadow-light);
 
+  /* 滚动容器样式 */
+  .scroll-container {
+    white-space: nowrap;
+  }
+
   /* 标签项样式 */
   .tags-item {
     position: relative;
-- 
Gitee