From 5d1eeec01fe98682c1b78f140b884bb7d48fd23e Mon Sep 17 00:00:00 2001
From: _island <82024018+QC2168@users.noreply.github.com>
Date: Sat, 7 Oct 2023 16:29:43 +0800
Subject: [PATCH] fix: sidebar scroll area is abnormal (#134)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: sidebar scroll area is abnormal

* fix: display value

* fix: 防止顶部模式垂直滚动

* fix: 'div' should be 'block'

---------

Co-authored-by: pany <939630029@qq.com>
---
 src/layouts/components/Sidebar/index.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/layouts/components/Sidebar/index.vue b/src/layouts/components/Sidebar/index.vue
index 629d829..9b88f73 100644
--- a/src/layouts/components/Sidebar/index.vue
+++ b/src/layouts/components/Sidebar/index.vue
@@ -47,6 +47,10 @@ const sidebarMenuHoverBgColor = computed(() => {
 const tipLineWidth = computed(() => {
   return layoutMode.value !== "top" ? "2px" : "0px"
 })
+// 当为顶部模式时隐藏垂直滚动条
+const hiddenScrollbarVerticalBar = computed(() => {
+  return layoutMode.value === "top" ? "none" : "block"
+})
 </script>
 
 <template>
@@ -97,8 +101,8 @@ const tipLineWidth = computed(() => {
 }
 
 .el-scrollbar {
-  // 多 5% 是为了在顶部模式时不显示垂直滚动条
-  height: 105%;
+  // 多 1% 是为了在顶部模式时防止垂直滚动
+  height: 101%;
   :deep(.scrollbar-wrapper) {
     // 限制水平宽度
     overflow-x: hidden !important;
@@ -112,6 +116,10 @@ const tipLineWidth = computed(() => {
       // 隐藏水平滚动条
       display: none;
     }
+    &.is-vertical {
+      // 当为顶部模式时隐藏垂直滚动条
+      display: v-bind(hiddenScrollbarVerticalBar);
+    }
   }
 }